微信小程序实现商品左右联动

scroll-view实现商品左右联动

scroll-view使用

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px

scroll-view文档

效果图

请忽略画质失真

注： 以下商品图片用于测试，如有侵权请通知，会删除相关图片。

wxml

<view class="productList">
    <!-- 左边菜单项 -->
    <view class="menu-wrapper">
        <scroll-view scroll-y="true" scroll-with-animation="true">
            <view class="menu-item {{index == curActive ? 'active' : ''}}" wx:for="{{productList}}" wx:key="index" bindtap="selectMenu" data-index="{{index}}">
                <view class="name">{{item.c_name}}</view>
            </view>
        </scroll-view>
    </view>
	
    <!-- 右边商品列表 -->
    <view class="prodeuct-wrapper">
        <scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="{{toView}}" style="height: 100%">
            <block wx:for="{{productList}}" wx:key="id">
                <!-- id：实现点击左侧某分类时，右侧滚动至相应位置（注意：id不能以数字开头）-->
                <view id="nav{{index}}" class="product">
                    <view class="title">{{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>
        </scroll-view>
    </view>
</view>

js

由于在data中模拟数据测试的，页面加载直接调用获取某个分类下商品高度。 那么根据实际需求，在请求数据成功后，调用即可。

const app = getApp()
var http = require('../../../../utils/request.js');
var that;
//存放右侧分类的高度累加数组
var heightList = [];
//记录scroll-view滚动过程中距离顶部的高度
var distanceToTop = 0;


Page({
    
    /**
     * 页面的初始数据
     */
    data: {
        curActive: 0, //当前选中项
        productList: [
            {
                c_name: '新鲜水果',
                list: [
                    {
                        id: 0,
                        img: '',
                        goodsName: '樱桃'
                    },
                    {
                        id: 1,
                        img: '',
                        goodsName: '荔枝'
                    },
                ]
            },
            {
                c_name: '海鲜水产',
                list: [
                    {
                        id: 0,
                        img: '',
                        goodsName: '鲍鱼'
                    }
                ]
            }
        ]
    },
    
    /**
     * 生命周期函数--监听页面显示
     */
    onLoad: function () {
        // 获取商品列表高度
        that.getProListHeight();
    },
    
    /**
     * 左侧: 菜单事件
     * @param {*} e 
     */
    selectMenu (e) {
        let index = e.currentTarget.dataset.index;
        that.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; //[386, 658, 930, 1202, ...]
            console.log(heightList);
        })
    },

    /**
     * 监听滚动时触发事件
     * @param {*} e 
     */
    scroll(e) {
        if(heightList.length == 0) return;

        let scrollTop = e.detail.scrollTop; //滚动位置
        let current = that.data.curActive;
        console.log('scrollTop======>', scrollTop);
        if (scrollTop > distanceToTop) {
            //如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
            if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
                that.setData({
                    curActive: current + 1
                })
            } 
        } else {
            //如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
            if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
                that.setData({
                    curActive: current - 1
                })
            }
        }

        //更新顶部的距离
        distanceToTop = scrollTop;
    }
})

wxss

这里使用了scss声明一些变量和mixin， 可根据自身要求修改

• wh： 宽高， sc： 字体、颜色 ， fcc： flex水平垂直居中， borderRadius： 圆角

.storeList {
    @include wh(100%, 100%);
    height: calc(100% - 66px);
    display: flex;
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    .menu-wrapper {
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        background: #f8f8f8;
        @include wh(180rpx, 100%);
        flex: 0 0 180rpx;
        .menu-item {
            @include wh(100%, 100rpx);
            @include fcc;
            @include sc(26rpx, $fc);
        }
        .active {
            color: #fe2945;
            background: $white;
        }
    }


    .prodeuct-wrapper {
        flex: 1;
        height: 100%;
        .product {
            width: 100%;
        }
        .title {
            font-weight: bold;
            @include sc(30rpx, $fc);
            padding: 20rpx;
        }
        .goods-box {
            display: flex;
            flex-wrap: wrap;
        }
        .goods-item {
            width: calc(100% / 3);
            @include fc;
            flex-direction: column;
            margin-bottom: 30rpx;
            .goods-img {
                @include wh(150rpx, 150rpx);
                @include borderRadius(6rpx);
            }
            .goods-name {
                @include sc(24rpx, $fc);
                padding-top: 10rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: calc(100% - 40rpx);
                text-align: center;
            }
        }
    }
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

数据结构效果图

临时测试数据，仅供参考

参考文章