一区二区日本_久久久久久久国产精品_无码国模国产在线观看_久久99深爱久久99精品_亚洲一区二区三区四区五区午夜_日本在线观看一区二区

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

這次給大家帶來微信小程序內如何做出跑馬燈效果(附代碼),微信小程序內做出跑馬燈效果的注意事項有哪些,下面就是實戰案例,一起來看一下。愛掏網 - 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其它相關文章!

聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
發表評論
更多 網友評論0 條評論)
暫無評論

返回頂部

主站蜘蛛池模板: 国产精品久久久久一区二区三区 | 国产日韩精品一区 | 在线看片网站 | 欧美亚洲国产一区二区三区 | 欧美极品在线播放 | 日本免费在线观看视频 | 欧美一级二级三级视频 | 99精品一区二区 | 自拍视频网 | 欧美日韩国产高清视频 | 久久久久久一区 | 欧美一级在线 | 日韩精品视频一区二区三区 | 久久国产精99精产国高潮 | 狠狠操天天干 | 久久人体 | 极品在线 | 国产欧美性成人精品午夜 | 欧美日韩在线播放 | 日韩欧美三区 | 久久精品一区二区三区四区 | 成人欧美一区二区三区在线播放 | 亚洲国产高清高潮精品美女 | 九九一级片 | 国产精品免费观看 | 日韩福利在线观看 | 国产一级视频在线观看 | 成人av网页| 99精品国产一区二区三区 | 欧美午夜一区 | 日韩一级免费大片 | 看毛片的网站 | 中文字幕 欧美 日韩 | 欧美男人天堂 | 国产中文字幕亚洲 | 国产成人精品免费视频大全最热 | 在线免费视频一区 | 欧美精品黄 | 99久久精品免费看国产免费软件 | 五月天天色 | 久久国产欧美日韩精品 |