這次給大家帶來微信小程序內如何做出跑馬燈效果(附代碼),微信小程序內做出跑馬燈效果的注意事項有哪些,下面就是實戰案例,一起來看一下。愛掏網 - it200.com
一:功能介紹及講解
實現的跑馬燈(跑馬燈里面顯示文章的title)的效果,并在右側有個查看文章的按鈕,按鈕綁定當前的跑馬燈信息的id,點擊按鈕后根據id跳轉到相應的文章詳情頁;
這里值得注意的點是我用了swiper組件的 bindchange 事件來獲取到當前信息的數組下標,實現了動態改變查看按鈕綁定信息id值的效果;
如果還有不懂的地方歡迎加入(173683895)微信小程序開發交流群。愛掏網 - it200.com
二:效果圖:
三:完整源碼
1.封裝成一個組件:
? ? ?登錄后復制? ??? ?? ???? ? ??查看 ? ???? ??? ? ?公告 ? ???? ???? ? ??? ????? ? ???{{item.title}}? ????? ? ????
.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其它相關文章!
聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。