|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要為大家詳細介紹了微信小程序實現YDUI的ScrollTab組件,滾動選項卡效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下本文實例為大家分享了微信小程序實現滾動選項卡效果的具體代碼,供大家參考,具體內容如下 DEMO下載 效果圖 YDUI的ScrollTab(滾動選項卡) WXML <!--導航 -->
<view class="tui-fixed-left">
<scroll-view class="tui-city-scroll" scroll-x="true">
<text bindtap="getStatus" id="NAV{{index}}" class="tui-nav-li {{index === status ? 'tui-nav-active' : ''}}" data-index="{{index}}" wx:for="{{navList}}">{{item}}</text>
</scroll-view>
</view>
<!--列表滾動區 -->
<view class="tui-fixed-y">
<scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
<view wx:for="{{navList}}">
<view id="NAV{{index}}" class="tui-list-head">{{item}}</view>
<view class="tui-list-li">{{item}} 列表 {{index}}</view>
</view>
</scroll-view>
</view>WXSS .tui-fixed-x{
margin-left: 130px;
position: fixed;
top: 0;
left: 0;
}
.tui-fixed-left{
width: 120px;
height: 100%;
border-right: 1px solid #dfdfdf;
position: fixed;
background-color: #f5f5f5;
top: 0;
left: 0;
}
.tui-list-head{
background-color: #fff;
margin-bottom: 15px;
}
.tui-city-scroll{
width: 100%;
}
.tui-nav-li{
font-size: 30rpx;
padding: 0 10px;
height: 100rpx;
line-height: 100rpx;
width: 100px;
display: block;
border-bottom: 1px solid #dfdfdf;
position: relative;
z-index: 10;
}
.tui-nav-active{
background-color: #fff;
}
.tui-fixed-y{
margin-left: 120px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
position: fixed;
bottom: 0;
right: 0;
}
.tui-city-scroll-y{
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: ['今日特惠', '煙灶推薦', '凈水飲水推薦', '洗碗機推薦', '電熱推薦', '燃熱推薦', '消毒柜推薦', '嵌入式推薦', '商用電器', '活動說明'],
status: 0
},
getStatus(e) {
this.setData({ status: e.currentTarget.dataset.index })
}
})總結 實現原理和處理方式都和微信小程序—-實現YDUI的ScrollNav組件一樣,細微的差別在于WXSS樣式表做了改變! 以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 微信小程序 scroll-view實現上拉加載與下拉刷新的實例 以上就是微信小程序實現YDUI中ScrollTab組件的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!