一区二区日本_久久久久久久国产精品_无码国模国产在线观看_久久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久久久久久 | 中文字幕在线精品 | 丁香综合 | 国产精品视频网 | 91久久国产综合久久91精品网站 | 精品国产乱码一区二区三 | 老妇激情毛片免费 | 欧美日韩精品中文字幕 | 一级aaaaaa毛片免费同男同女 | 玖玖视频免费 | 国产精品不卡视频 | 精品亚洲一区二区三区四区五区高 | 国产精品国产精品国产专区不卡 | 久久成人免费 | 欧美日产国产成人免费图片 | 激情网五月天 | 成年人免费网站 | 97色综合| 精品久久久久久久久久 | 精品无码三级在线观看视频 | 红色av社区| 91精品国产色综合久久不卡蜜臀 | 日本午夜在线视频 | 国产精品久久毛片av大全日韩 | 一区精品在线观看 | h片在线看 | 国产精品亚洲一区二区三区在线观看 | 亚洲精品久久久久久久久久久 | 成人精品一区 | 亚洲国产精品成人无久久精品 | 天天色天天射天天干 | 国产区精品 | av黄色在线 | 91国内精品久久 | 一区二区视频在线观看 | 国产aⅴ爽av久久久久久久 | 亚洲精品国产电影 |