微信小程序內如何做出跑馬燈效果(附代碼)

這次給大家帶來微信小程序內如何做出跑馬燈效果(附代碼)，微信小程序內做出跑馬燈效果的注意事項有哪些，下面就是實戰案例，一起來看一下。愛掏網 - it200.com

一：功能介紹及講解

實現的跑馬燈（跑馬燈里面顯示文章的title）的效果，并在右側有個查看文章的按鈕，按鈕綁定當前的跑馬燈信息的id，點擊按鈕后根據id跳轉到相應的文章詳情頁；

這里值得注意的點是我用了swiper組件的 bindchange 事件來獲取到當前信息的數組下標，實現了動態改變查看按鈕綁定信息id值的效果；

如果還有不懂的地方歡迎加入（173683895）微信小程序開發交流群。愛掏網 - it200.com

二：效果圖：

三：完整源碼

1.封裝成一個組件：

?

登錄后復制

.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?"../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的數據：

相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！

推薦閱讀：

JS反射與依賴注入使用案例分析

如何在微信小程序內開發驗證碼密碼輸入框功能

以上就是微信小程序內如何做出跑馬燈效果(附代碼)的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！