快捷導(dǎo)航

小程序?qū)崿F(xiàn)錨點滑動效果

更新時間：2019年09月23日 14:23:16 作者：elkers

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)錨點滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

要在小程序中實現(xiàn)錨點的話，就要用到<scroll-view > 標(biāo)簽中的，scroll-into-view，詳情可見文檔

wxml：

<view class='scroll-box' style='height:{{ht}}px;'>
 <scroll-view scroll-y class='menu-tab' scroll-into-view="{{toView}}" scroll-with-animation="true">
 <block wx:for="{{tabList}}" wx:key="">
 <view class='item-tab {{item.checked ? "item-act":""}}' id="t{{index}}" data-index="{{index}}" bindtap='intoTab'>{{item.title}}</view>
 </block>
 </scroll-view>
 
 <scroll-view scroll-y style='height:{{ht}}px;' 
 scroll-with-animation="true" 
 bindscrolltoupper="upper" 
 bindscrolltolower="lower" 
 bindscroll="scrollRight" 
 scroll-into-view="{{toViewRt}}">
 <block wx:for="{{contList}}" wx:key="">
 <view class='cont-box' id="t{{index}}" style='height:{{ht}}px;'>{{item.cont}}</view>
 </block>
 </scroll-view>
</view>

wxss:

.scroll-box{display: flex;flex-wrap: nowrap;}
.menu-tab{
 width: 180rpx;
 text-align: center;
 height: 100%;
 color: #666;
 border-right:1rpx solid #999
 
}
.item-tab{
 font-size:28rpx;
 padding:8rpx;
}
.cont-box{
 border-top: 1px solid;
 box-sizing: border-box;
}
.item-act{
 background: linear-gradient(to bottom right, #6C53B1 , #8B2EDF);
 color: #fff;
 border-radius: 100px;
}

js:

var app = getApp();
 
 
Page({
 data: {
 current: 0, 
 // 左側(cè)菜單
 tabList: [
 { title: 'tab1', checked: true },
 { title: 'tab2', checked: false },
 { title: 'tab3', checked: false },
 { title: 'tab4', checked: false },
 { title: 'tab5', checked: false },
 { title: 'tab6', checked: false },
 
 ],
 // 右側(cè)內(nèi)容
 contList: [
 { cont: 'tab1'},
 { cont: 'tab2'},
 { cont: 'tab3'},
 { cont: 'tab4'},
 { cont: 'tab5'},
 { cont: 'tab6'},
 
 ],
 },
 
 // 循環(huán)切換
 forTab(index) {
 let lens = this.data.tabList.length;
 let _id = 't' + index;
 for (let i = 0; i < lens; i++) {
 this.data.tabList[i]['checked'] = false;
 }
 this.data.tabList[index]['checked'] = true;
 this.setData({
 tabList: this.data.tabList,
 toView: _id,
 current: index
 });
 },
 
 // 點擊左側(cè)菜單欄
 intoTab(e) {
 let lens = this.data.tabList.length;
 let _index = e.currentTarget.dataset.index;
 this.forTab(_index);
 let _id = 't' + _index;
 this.setData({
 toViewRt: _id
 });
 },
 
 // 滾動右側(cè)菜單
 scrollRight(e) {
 //console.log(e)
 let _top = e.detail.scrollTop;
 let progress = parseInt(_top / this.data.ht); // 計算出 當(dāng)前的下標(biāo)
 if (progress > this.data.current) { // 向上拉動屏幕
 
 this.setData({ current: progress });
 this.forTab(this.data.current);
 } else if (progress == this.data.current) {
 return false;
 } else { // 向下拉動屏幕
 
 this.setData({
 current: progress == 0 ? 0 : progress--
 });
 this.forTab(progress);
 }
 },
 
 onLoad: function (options) {
 console.log(this.data.tabList)
 // 框架尺寸設(shè)置
 wx.getSystemInfo({
 success: (options) => {
 var wd = options.screenWidth; // 頁面寬度
 var ht = options.windowHeight; // 頁面高度
 this.setData({ wd: wd, ht: ht })
 }
 });
 },
 
 onShow: function () {
 // 初始化狀態(tài)
 this.setData({
 toView: 't' + this.data.current,
 toViewRt: 't' + this.data.current
 })
 }, 
 
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: