新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)滾動(dòng)導(dǎo)航效果的具體代碼,供大家參考,具體內(nèi)容如下
成都創(chuàng)新互聯(lián)公司2013年至今,先為冊(cè)亨等服務(wù)建站,冊(cè)亨等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為冊(cè)亨企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
DEMO下載
效果圖
實(shí)現(xiàn)原理
采用雙 scroll-view 組件實(shí)現(xiàn)雙滾動(dòng)!
WXML
{{item}} {{item}} {{item}} 列表 {{index}}
WXSS
.tui-fixed-x{ width: 100%; position: fixed; top: 0; left: 0; } .tui-city-scroll{ height: 80rpx; line-height: 80rpx; width: 100%; white-space: nowrap; } .tui-nav-li{ font-size: 30rpx; padding: 0 8rpx; } .tui-nav-li:first-child{padding-left: 16rpx;} .tui-nav-li:last-child{padding-right: 16rpx;} .tui-nav-active{color: red;} .tui-fixed-y{ width: 100%; height: calc(100% - 80rpx); position: fixed; bottom: 0; left: 0; } .tui-city-scroll-y{ padding: 0 20rpx; height: 100%; box-sizing: border-box; } .tui-list-head{ height: 50px; line-height: 50px; text-align: center; font-size: 30rpx; color: blue; } .tui-list-li{ height: 400px; padding: 10rpx; color: #fff; font-size: 50rpx; background-color: lightgreen; }
JS
Page({ data: { navList: ['今日特惠', '煙灶推薦', '凈水飲水推薦', '洗碗機(jī)推薦', '電熱推薦', '燃熱推薦', '消毒柜推薦', '嵌入式推薦', '商用電器','活動(dòng)說(shuō)明'], status: 0 }, getStatus(e){ this.setData({ status: e.currentTarget.dataset.index}) } })
注意
- scroll-view 組件如果橫向滾動(dòng)必須要有一個(gè)可視寬度,縱向滾動(dòng)必須要有一個(gè)可視高度;
- 滾動(dòng)的定位采用 scroll-view 組件的 scroll-into-view 屬性,用 id 進(jìn)行定位。
DEMO下載
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁(yè)題目:微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件
網(wǎng)頁(yè)鏈接:http://fisionsoft.com.cn/article/jcceod.html