小程序纵向选项卡可以滑动_微信小程序常用纵向滑动菜单（点击侧边菜单定位）...

罗小熙

于 2020-12-30 18:29:30 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

文章标签：小程序纵向选项卡可以滑动

本文链接：https://blog.youkuaiyun.com/weixin_35747627/article/details/112054137

本文介绍了如何在微信小程序中创建一个可滑动的纵向选项卡，并实现点击侧边菜单进行内容定位。通过js、wxml和wxss代码展示了一个完整的示例，包括设置选项卡样式、监听滚动事件以及初始化高度数组等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码

Page({

data : {

// 左侧的id

leftId: 'left0',

// 左侧当前项

leftActiveNum: 0,

// 右侧id

rightId: 'right0',

// 每块商品区块高度

heaghtArr : [],

// 左侧点击事件

leftClickFn(e) {

this.setData({

leftActiveNum: e.target.dataset.myid,

leftId: 'left' + e.target.dataset.myid,

rightId: 'right' + e.target.dataset.myid,

})

// 右侧滚动事件

rightScrollFn( e ){

let st = e.detail.scrollTop; // 获取当前滚动到的位置

let myArr = this.data.heightArr;// 获取所有商品区块高度

for( var i = 0; i < myArr.length; i++){

// 判断当前滚动位置是否超出区块累加高度并且小于下一区块高度来修改scroll-into-view的Id

if( st >= myArr[i] && st < myArr[i+1] ){

this.setData ({

leftId : 'left'+i,

leftActiveNum : i,

})

return ;

}

// 生命周期

onReady() {

let _this = this;

setTimeout( function () {

let initArr = [0]; // 初始的数组

let initNum = 0; // 初始的数值

const query = wx.createSelectorQuery()

query.selectAll('.rightblock').boundingClientRect()

query.selectViewport().scrollOffset()

query.exec(function (res) {

res[0].map( val => {

initNum += val.height; // 每一块高度累加

initArr.push(initNum - 15); // 将累加出来的高度push到数组中

})

_this.setData({

heightArr : initArr,

})

} , 300 )

}

})

wxml代码

wxss代码

.left{

border-right: 1rpx solid #000;

width: 25%;

float: left;

height: calc(100vh - calc(100vw/1080*520));

box-sizing: border-box;

}

.left view{

border-bottom: 1rpx solid #000;

height: 80rpx;

line-height: 80rpx;

background: #fff;

text-align: center;

position: relative;

}

.left view::before{

content: "";

background: #fff;

width: 8rpx;

height: 80rpx;

position: absolute;

left: 0;

top: 0;

}

.left view.active::before{

background: #333999;

}

.right{

height: calc(100vh - calc(100vw/1080*520));

float: right;

width: 75%;

padding:0 2%;

box-sizing: border-box;

}

.right .title{

height: 60rpx;

line-height: 60rpx;

}

.right .content{

background: #fff;

padding: 1%;

padding-right: 0;

box-sizing: border-box;

display: flex;

justify-content: flex-start;

flex-wrap: wrap;

}

.box{

width: 32%;

margin-right: 1%;

text-align: center;

margin-bottom: 10rpx;

}

.box image{

width: 90%;

}

.box text{

text-overflow: ellipsis;

overflow: hidden;

font-size: 28rpx;

display: block;

white-space: nowrap;

}

效果图

image.png