一：功能介紹及講解
實現的跑馬燈（跑馬燈里面顯示文章的title）的效果，并在右側有個查看文章的按鈕，按鈕綁定當前的跑馬燈信息的id，點擊按鈕后根據id跳轉到相應的文章詳情頁；
這里值得注意的點是我用了swiper組件的 bindchange 事件來獲取到當前信息的數組下標，實現了動態改變查看按鈕綁定信息id值的效果；
如果還有不懂的地方歡迎加入（173683895）微信小程序開發交流群。
二：效果圖：
三：完整源碼
1.封裝成一個組件：
<!-- //滾動 --> <template name="roll"> <block> <navigator url='../details/details2/detail2?artical_id={{newsId}}'> <view class='chakan'>查看</view> </navigator> <view class='sx_lunbo page_row'> <text class='red'>公告</text> <swiper class='sx_swiper page_row' autoplay interval="5000" duration="3000" bindchange="newsId" data-newsId='{{item.id}}' circular> <swiper-item wx:for="{{news}}" wx:key=""> <view class='reds'>{{item.title}} </view> </swiper-item> </swiper> </view> </block> </template> .sx_lunbo { width: 100%; height: 60rpx; border-bottom: solid 1px #eee; } .chakan{ padding-left: 25rpx; right: 20rpx; clear: both; position:absolute; height: 40rpx; margin-top: 10rpx; color: #f63; border:solid 1px #f63; border-radius:5rpx; padding: 0rpx 10rpx 0rpx 10rpx; font-size: 28rpx } .sx_swiper { width: 550rpx; margin-top: 10rpx; } .sx_swiper swiper-item{ height: 40rpx } .reds { overflow: hidden; text-overflow: ellipsis; white-space:nowrap; width:500rpx; font-size: 28rpx; height: 40rpx; } .red { font-size: 24rpx; color: white; width: 60rpx; height: 40rpx; line-height: 40rpx; background: blue; padding-left: 10rpx; margin: 10rpx; border-radius: 10rpx; } 2.在頁面調用：
<import src="../template/roll/roll.wxml" /> <template is="roll" data="{{news,newsId}}" /> @import "../template/roll/roll.wxss";
newsId: function (e) { var that = this var item = e.detail.current; this.setData({ newsId:that.data.news[item].id }) }, 3.news的數據：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
