小程序实现锚点滑动效果

2023-08-13 18:16:04 525

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

varapp=getApp(); Page({ data:{ current:0, //左侧菜单 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}, ], //右侧内容 contList:[ {cont:'tab1'}, {cont:'tab2'}, {cont:'tab3'}, {cont:'tab4'}, {cont:'tab5'}, {cont:'tab6'}, ], }, //循环切换 forTab(index){ letlens=this.data.tabList.length; let_id='t'+index; for(leti=0;ithis.data.current){//向上拉动屏幕 this.setData({current:progress}); this.forTab(this.data.current); }elseif(progress==this.data.current){ returnfalse; }else{//向下拉动屏幕 this.setData({ current:progress==0?0:progress-- }); this.forTab(progress); } }, onLoad:function(options){ console.log(this.data.tabList) //框架尺寸设置 wx.getSystemInfo({ success:(options)=>{ varwd=options.screenWidth;//页面宽度 varht=options.windowHeight;//页面高度 this.setData({wd:wd,ht:ht}) } }); }, onShow:function(){ //初始化状态 this.setData({ toView:'t'+this.data.current, toViewRt:'t'+this.data.current }) }, })

小程序实现锚点滑动效果

热门推荐

随机推荐