介绍 & lt; !,,//滚动,——祝辞,
& lt; template name=皉oll"祝辞,
& lt; block>大敌;
,,& lt; navigator url=& # 39; . ./细节/details2/detail2 ? artical_id={{newsId}} & # 39;祝辞,
,,,& lt; view 类=& # 39;chakan& # 39;在查看& lt;/view>,
,,& lt;/navigator>,
& lt;才能view 类=& # 39;sx_lunbo page_row& # 39;祝辞,
,,& lt; text 类=& # 39;红色# 39;在公告& lt;/text>,
,,& lt; swiper 类=& # 39;sx_swiper page_row& # 39;, autoplay 间隔=?000“,时间=?000“,bindchange=皀ewsId", data-newsId=& # 39; {{item.id}} & # 39;, circular>,
,,,& lt; swiper-item 天气:为=皗{新闻}},,天气:关键=啊白４?
,,,,& lt; view 类=& # 39;红色# 39;在{{item.title}},
,,,,& lt;/view>,
,,,& lt;/swiper-item>,
,,& lt;/swiper>,
& lt;/view>才能,
& lt;/block>大敌;
& lt;/template> .sx_lunbo {,
,宽度:100%,,
,高度:60 rpx;,
,边界底部:solid 1 px # eee;,
},
.chakan {,
,padding-left: 25 rpx;,
,右:20 rpx;,
,明确:两个,,
位置:绝对的,,大敌;
,高度:40 rpx;,
,margin-top: 10 rpx;,
,颜色:# f63;,
,边界:solid 1 px # f63;,
,这个特性:5 rpx;
,填充:0 rpx 10 rpx 0 rpx 10 rpx;,
,字体大小:28 rpx
},
{.sx_swiper
,宽度:550 rpx;,
,margin-top: 10 rpx;,
},
swiper-item {.sx_swiper
,,身高:40 rpx
}大敌;
{.reds
,溢出:,隐藏;
,文本溢出:,省略号;
,空白:nowrap;}
宽度:500 rpx;大敌;
,字体大小:28 rpx;,
,高度:40 rpx;,
},
{.red
,字体大小:24 rpx;,
,颜色:白色,,
,宽度:60 rpx;,
,高度:40 rpx;,
,行高:40 rpx;,
,背景:,蓝色;
,padding-left: 10 rpx;,
,保证金:10 rpx;,
,这个特性:10 rpx;,
} & lt; https://www.yisu.com/zixun/import src=" . ./模板/卷/roll.wxml "/>
<模板=肮觥笔?"{{新闻,newsId}} "/> @import “. ./模板/卷/roll.wxss"; newsId:, function (e), {,
,var that =,却,能够
,var item =, e.detail.current;,
this.setData({大敌;
newsId才能:that.data.news[项目].id
})大敌;
},
小编给大家分享一下微信小程序实现跑马灯动画效果的示例,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
一:功能介绍及讲解
实现的跑马灯(跑马灯里面显示文章的标题)的效果,并在右侧有个查看文章的按钮,按钮绑定当前的跑马灯信息的id,点击按钮后根据id跳转到相应的文章详情页;
这里值得注意的点是我用了偷窃者组件的bindchange事件来获取到当前信息的数组下标,实现了动态改变查看按钮绑定信息id值的效果;
二:完整源码
1。封装成一个组件:
2。在页面调用:
3。新闻的数据:
看完了这篇文章,相信你对微信小程序实现跑马灯动画效果的示例有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
