uni-app 商城选择商品左右菜单联动效果实现

{

title: “菜单4”,

list: [“盖饭4”, “大白菜4”, “土豆4”, “西红柿4”, “辣椒4”]

},

{

title: “菜单5”,

list: [“盖饭5”, “大白菜5”, “土豆5”, “西红柿5”, “辣椒5”]

},

{

title: “菜单6”,

list: [“盖饭6”, “大白菜6”, “土豆6”, “西红柿6”, “辣椒6”]

},

{

title: “菜单7”,

list: [“盖饭7”, “大白菜7”, “土豆7”, “西红柿7”, “辣椒7”]

},

{

title: “菜单8”,

list: [“盖饭8”, “大白菜8”, “土豆8”, “西红柿8”, “辣椒8”]

},

{

title: “菜单9”,

list: [“盖饭9”, “大白菜9”, “土豆9”, “西红柿9”, “辣椒9”]

},

{

title: “菜单10”,

list: [“盖饭10”, “大白菜10”, “土豆10”, “西红柿10”, “辣椒10”]

},

{

title: “菜单11”,

list: [“盖饭11”, “大白菜11”, “土豆11”, “西红柿11”, “辣椒11”]

},

{

title: “菜单12”,

list: [“盖饭12”, “大白菜12”, “土豆12”, “西红柿12”, “辣椒12”]

},

{

title: “菜单13”,

list: [“盖饭13”, “大白菜13”, “土豆13”, “西红柿13”, “辣椒13”]

}

],

windowHeight: ‘0px’,

clickId: ‘’,

clickToId:‘’,

currentNum: 0,

topList:[],

isLeftClick:false

};

},

methods: {

setId(index) {

this.clickId = “po” + index;

this.isLeftClick=true;

this.currentNum=index;

},

scroll(e){

if(this.isLeftClick){

this.isLeftClick=false;

return;

}

let scrollTop=e.target.scrollTop;

for (let i = 0; i < this.topList.length; i++) {

let h1=this.topList[i];

let h2=this.topList[i+1];

if(scrollTop>=h1&&scrollTop<h2){

this.currentNum=i;

this.clickToId=‘to’+i

}

}

},

getNodesInfo(){

const query = uni.createSelectorQuery().in(this);

query.selectAll(‘.right_title’).boundingClientRect().exec((res)=>{

console.log(res)

let nodes=res[0];

let rel=[];

nodes.map(item=>{

rel.push(item.top);

})

console.log(rel)

this.topList=rel;

});

}

},

onLoad() {

let _that = this;

uni.getSystemInfo({

success: function(res) {

_that.windowHeight = res.windowHeight + ‘px’;

}

});

this.getNodesInfo();

}

}

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值