微信小程序实现商品数据联动效果 微信小程序实现商品数据联动 直接复制代码更改可以看出效果,然后根据自己想要进行调整 注: 以下商品图片用于测试,如有侵权请通知,会删除相关图片. js部分: // pages/demo1/demo1.js //存放右侧分类的高度累加数组
微信小程序实现商品数据联动
直接复制代码更改可以看出效果，然后根据自己想要进行调整
注： 以下商品图片用于测试，如有侵权请通知，会删除相关图片。
js部分：
// pages/demo1/demo1.js
//存放右侧分类的高度累加数组
var heightList = [];
//记录scroll-view滚动过程中距离顶部的高度
var distanceToTop = 0;
Page({
/**
* 页面的初始数据
*/
data: {
curActive: 0, //当前选中项
productList: [{
c_name: '新鲜水果',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '樱桃'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
{
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '荔枝'
},
]
},
{
c_name: '海鲜水产',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 8,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
]
},
{
c_name: '测试数据1',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 8,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
]
},
{
c_name: '测试数据2',
list: [{
id: 0,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
{
id: 1,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
{
id: 2,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 3,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 4,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 5,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 6,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 7,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
}, {
id: 8,
img: 'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName: '鲍鱼'
},
]
}
]
},
/**
* 左侧: 菜单事件
* @param {*} e
*/
selectMenu(e) {
let index = e.currentTarget.dataset.index;
this.setData({
curActive: index,
toView: "nav" + index
})
},
/**
* 获取商品列表高度
* 计算右侧商品某分类的高度
*/
getProListHeight() {
let tmpHeightList = [];
let tmpH = 0; //临时存放每个分类的高度
// 获取元素信息 返回一个 SelectorQuery 对象实例
const query = wx.createSelectorQuery()
query.selectAll('.product').boundingClientRect()
query.exec(function (res) {
res[0].forEach((item) => {
tmpH += item.height;
// Math.floor()向下取整 【根据个人需要修改】
tmpHeightList.push(Math.floor(tmpH));
})
heightList = tmpHeightList;
console.log(heightList);
})
},
/**
* 监听滚动时触发事件
* @param {*} e
*/
scroll(e) {
if (heightList.length == 0) return;
let scrollTop = e.detail.scrollTop; //滚动位置
let current = this.data.curActive;
console.log('scrollTop======>', scrollTop);
if (scrollTop > distanceToTop) {
//如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
this.setData({
curActive: current + 1
})
}
} else {
//如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
this.setData({
curActive: current - 1
})
}
}
//更新顶部的距离
distanceToTop = scrollTop;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取商品列表高度
this.getProListHeight();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('触发下拉')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发上拉触底')
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
然后是wxml部分：
<view class="title">商品数据联动</view>
<view class="box">
<view class="left">
<scroll-view scroll-y="true" scroll-with-animation="true" class="container">
<view class="menu-item {{index == curActive ? 'active' : ''}}" wx:for="{{productList}}" data-index="{{index}}" wx:key="index" bindtap="selectMenu">
{{item.c_name}}
</view>
</scroll-view>
</view>
<view class="right">
<scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="{{toView}}" style="height: 100%">
<block wx:for="{{productList}}" wx:key="*this">
<!-- id：实现点击左侧某分类时，右侧滚动至相应位置（注意：id不能以数字开头）-->
<view id="nav{{index}}" class="product">
<view class="c_name">{{item.c_name}}</view>
<view class="goods-box">
<view class="goods-item" wx:for="{{item.list}}" wx:for-item='items' wx:key="index">
<image class="goods-img" src="{{items.img}}" mode="aspectFit"></image>
<view class="goods-name">{{items.goodsName}}</view>
</view>
</view>
</view>
</block>
<view class="bottom">到底了~没有更多了</view>
</scroll-view>
</view>
</view>然后是css部分：
.title {
text-align: center;
margin-top: 30px;
}
.box{
width: 100%;
height: 400px;
display: flex;
}
.left {
width: 80px;
display: inline-block;
}
.right{
flex: 1;
background: #ccc;
}
.container {
width: 100%;
height: 400px;
background-color: gray;
padding: 0;
}
.menu-item {
width: 100%;
height: 50px;
border-bottom: 1px solid #000;
background-color: pink;
line-height: 50px;
text-align: center;
}
.active {
background-color: red;
}
.c_name{
width: 100%;
text-align: center;
padding-top: 20px;
}
.goods-box {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.goods-item{
width: 80px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.goods-img{
width: 50px;
}
.bottom{
width: 100%;
height: 60px;
text-align: center;
line-height: 80px;
font-size: 10px;
color: rgb(139, 135, 135);
}
到此这篇关于微信小程序实现商品数据联动的文章就介绍到这了,更多相关小程序商品数据联动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
沃梦达教程
本文标题为：微信小程序实现商品数据联动效果
猜你喜欢
- 1 Vue - 简介 2023-10-08
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- 关于 html：如何从 css 表中删除边距和填充 2022-09-21
- jsPlumb+vue创建字段映射关系 2023-10-08
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- ajax实现输入提示效果 2023-02-14
- layui数据表格以及传数据方式 2022-12-13
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- JS实现左侧菜单工具栏 2022-08-31
- vue keep-alive 2023-10-08
