微信小程序二级左右联动实现2.0
1. wxml代码
html
<!--shared_store/pages/tests/tests.wxml-->
<view class="test-box">
<view class="box-box">
<view class="aside" id="leftNav">
<scroll-view scroll-y="true" scroll-with-animation="true">
<view
class="lf-lis {{navActive == index?'selected':''}}"
wx:for="{{categories}}"
wx:key="index"
data-index="{{index}}"
bindtap="navigateTap"
>
{{ item.name }}
</view>
</scroll-view>
</view>
<view class="right-content" id="right-content" ref="rightContent">
<!-- 通过scroll-into-view 可以实现类型于 瞄点链接的效果 当 navActive 改变时 会自动划到id="category-x"处 -->
<scroll-view
scroll-y="true"
scroll-into-view="category-{{toView}}"
bindscroll="scroll"
bindscrolltolower="scrolltolower"
scroll-with-animation="true"
style="height: 100%"
class="conterScroll"
>
<view
wx:for="{{products}}"
wx:key="index"
id="category-{{index}}"
class="ri-box"
>
<view class="ri-lis">
<view class="ri_lis-title">------{{ item.name }}------</view>
<view class="ri-lis-box">
<view
class="ri-lis-li"
wx:for="{{item.child}}"
wx:for-index="ind" wx:for-item="items">
<image
class="imgs"
src="{{items.img}}"
alt=""
/>
<view class="li_title">{{ items.name }}</view>
</view>
</view>
</view>
</view>
<!-- 最后一类商品不够时，添加高度撑满屏幕 -->
<view
style="{{'height:' + (height -300) + 'rpx;'}}"
wx:if="childLth < 15"
></view>
</scroll-view>
</view>
</view>
</view>2. wxss代码
css
/* shared_store/pages/tests/tests.wxss */
page {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.test-box {
width: 100%;
height: 100vh;
}
.pay_header {
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
position: relative;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 34rpx;
color: #000;
line-height: 88rpx;
}
.pay_imgs {
width: 28rpx;
height: 50rpx;
position: absolute;
left: 28rpx;
top: 50%;
transform: translateY(-50%);
}
.arrow_img {
width: 48rpx;
height: 48rpx;
}
view {
box-sizing: border-box;
}
.box-box {
width: 100%;
height: calc(100vh - 88rpx);
display: flex;
}
.aside {
width: 100px;
height: 100%;
background-color: #fff;
}
.lf-lis {
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
}
.selected {
background-color: rgba(0, 238, 255, 0.418);
color: #fff;
}
.right-content {
flex: 1;
height: 100%;
overflow-y: auto;
}
.right-content::-webkit-scrollbar {
display: none;
}
.ri_lis-title {
width: 100%;
color: #999;
padding: 20px;
text-align: center;
}
.ri-lis-box {
width: 100%;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.ri-lis-li {
margin-right: 10px;
margin-bottom: 10px;
}
.ri-lis-li:nth-child(3n) {
margin-right: 0;
}
.imgs {
width: 80px;
height: 80px;
border-radius: 50%;
}
.li_title {
width: 100%;
text-align: center;
font-size: 12px;
}
.entry-box {
height: calc(100vh - 100px);
}3. js代码
js
// shared_store/pages/tests/tests.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
categories: [
// 左侧导航栏的选项
{ id: 1, name: "分类1" },
{ id: 2, name: "分类2" },
{ id: 3, name: "分类3" },
],
navActive: 0,
products: [
// 右侧商品列表的模块
{
id: "product1",
name: "商品1",
child: [
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
{
id: "product2",
name: "商品2",
child: [
{ id: "product2", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
{
id: "product3",
name: "商品3",
child: [
{ id: "product1", name: "商品1-1",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product3", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product5", name: "商品1-5",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product6", name: "商品1-6",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
{ id: "product6", name: "商品1-7",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
],
},
// {
// id: "product4",
// name: "商品4",
// child: [
// { id: "product2", name: "商品1-1" ,img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png'},
// { id: "product2", name: "商品1-2",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
// { id: "product2", name: "商品1-3",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
// { id: "product4", name: "商品1-4",img:'https://develop.dongguanhongyun.com/resources/5903/202405/17168772712541156601615.png' },
// ],
// },
],
childLth: "",
hightArr: [], //列表每个分类对应的区域top集合
lock: false,
toView: "",//右边瞄点项
height: 0,//商品列表高度
},
navigateTap(e) {
var that = this;
let index=e.currentTarget.dataset.index;
let cla=e.currentTarget.dataset.cla;
console.log(cla,'pppppppppppp');
that.setData({
lock:true,
navActive: index,
toView: index,
});
},
scroll: function (e) {
var that = this;
if(that.data.lock){
return that.setData({
lock:false,
});
}
console.log('falsefalsefalsefalsefalse');
let scrollTop = e.detail.scrollTop;
let scrollArr = that.data.hightArr;
if (that.data.lock) {
that.setData({
lock:false,
});
return;
}
for (let i = 0; i < scrollArr.length; i++) {
if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
that.setData({
navActive:0,
});
} else if (
scrollTop >= scrollArr[i] - scrollArr[0] &&
scrollTop < scrollArr[i + 1] - scrollArr[0]
) {
that.setData({
navActive:i,
});
} else if (
scrollTop >=
scrollArr[scrollArr.length - 1] - scrollArr[0]
) {
that.setData({
navActive:scrollArr.length - 1,
});
}
}
},
infoScroll: function () {
let that = this;
let len = that.data.products.length;
that.childLth = that.data.products[len - 1].child.length;
// //设置商品列表高度
wx.getSystemInfo({
success: function (res) {
let heights = res.windowHeight * (750 / res.windowWidth) - 98;
that.setData({
height:heights,
});
},
});
let hightArr = [];
for (let i = 0; i < len; i++) {
//获取元素所在位置
let query = wx.createSelectorQuery();
query.select("#category-" + i).boundingClientRect();
query.selectViewport().scrollOffset()
query.exec(function (res) {
let top = res[0].top;
hightArr.push(top);
that.setData({
hightArr:hightArr,
});
});
}
},
scrolltolower() {
console.log("触底事件");
// 在这里处理触底事件的逻辑
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that = this;
that.infoScroll();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})