微信小程序实现商城分类列表

// ps:先上代码后面有时间再补备注

效果图

wxml

<view class="container">

        <view class='main'>

                <scroll-view class='left_sroll' scroll-with-animation="true" scroll-y>

                    <block wx:for="{{left_sroll_arr}}" wx:for-index="index" wx:key="index">

                        <view class='unit {{left_srcoll_index == index?"alive":""}}' data-index="{{index}}" bindtap="changeLeft_sroll">{{item}}</view>

</block>

                </scroll-view>

        <view class='right'>

<scroll-view class='top_sroll' style="width: 100%" scroll-x="true" scroll-into-view="{{'inTo'+rigId}}" scroll-with-animation="true" >

        <block wx:for="{{top_sroll_arr}}" wx:for-index="index" wx:key="index" >

            <view data-index="{{index}}" data-id="{{item.id}}" bindtap="changeTop_sroll" id="{{'inTo'+item.id}}">

                <text class='{{index == top_srcoll_index?"alive":""}}' data-view="{{item.intoView}}" >{{item.text}}</text>

            </view>

        </block>

</scroll-view>

    <scroll-view class='bottom_sroll' scroll-y scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true" bindscroll="scroll" scroll-top="{{scrollTop}}">

        <block wx:for="{{right_scroll_content}}" wx:key="index"> <view class='unit' wx:for="{{item.data}}" wx:for-item="itemData" wx:key="dataIndex" id="{{'inToview'+item.id}}">

        <image src='{{itemData.productImg}}' class='productImg'></image> <view class='details'>         <view class='title'>{{itemData.title}}</view>

        <view class='details_content'>

            <view class='price'>

                    <text class='newPrice'>¥{{itemData.newPrice}}</text>

                    <text class='oldPrice'>¥{{itemData.oldPrice}}</text>

            </view>

           <image src='./images/car-icon.png' class='car-icon'></image>

        </view>

        </view>

        </view>

</block>

</scroll-view>

    </view>

</view>

</view>

wxss

.container {}.main { height: calc(100vh); width: 100%; box-sizing: border-box; position: relative; overflow: hidden; display: flex;}.left_sroll { width: 160rpx; height: 100%; background-color: #f5f5f5;}.left_sroll view { text-align: center; height: 100rpx; line-height: 100rpx; position: relative;}.left_sroll .alive { background: #fff;}.left_sroll .alive::before { content: ""; display: block; height: 30rpx; width: 4rpx; background: #ff7500; margin-top: 35rpx; position: absolute;}.right { width: calc(100% - 160rpx); display: flex; flex-direction: column;}.top_sroll { position: relative; height: 100rpx; line-height: 100rpx; overflow: auto; display: flex; flex-direction: row; overflow-y: scroll; white-space: nowrap; width: calc(100% - 160rpx);}.top_sroll view { height: 100rpx; line-height: 100rpx; display: inline-block; padding: 0 30rpx;}.top_sroll .alive{ color: #FF9B00; border:1px solid #FF9B00; border-radius: 30rpx; padding: 5rpx 20rpx;}.bottom_sroll { height: calc(100% - 100rpx); width: 100%; position: relative;}.bottom_sroll .unit { line-height: 100rpx; display: flex; align-items: center; margin-bottom: 24rpx;}.bottom_sroll .unit .productImg { width: 180rpx; height: 180rpx;}.bottom_sroll .unit .car-icon { width: 64rpx; height: 64rpx;}.bottom_sroll .unit .details { padding: 10rpx 20rpx; width: calc(100% - 200rpx); height: 100%;}.bottom_sroll .unit .details_content { display: flex; justify-content: space-between; align-items: center; width: 100%;}.bottom_sroll .unit .details_content .price { display: flex; flex-direction: column; padding: 0; margin: 0;}.bottom_sroll .unit .details_content .price .newPrice { color: #ff7500; height: 35rpx; line-height: 35rpx;}.bottom_sroll .unit .details_content .price .oldPrice { color: #c0c0c0; text-decoration: line-through; font-size: 28rpx; height: 35rpx; line-height: 35rpx;}

({data: { left_srcoll_index: 0, left_sroll_arr: ['热卖', '蔬菜', '蛋肉', '水产', '零食', '轻食', '热卖', '蔬菜', '蛋肉', '水产', '零食', '轻食'], top_srcoll_index: 0, top_sroll_arr: [{ id: "01", text: '新人大礼包' }, { id: "02", text: '限时特价' }, { id: "03", text: '时令鲜果' } ], content_srcoll: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99", intoView: "test1" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99", intoView: "test2" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99", intoView: "test3" } ], right_scroll_content: [{ id: "01", title: "新人大礼包", data: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" } ] }, { id: "02", title: "限时特价", data: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" } ] }, { id: "03", title: "时令鲜果", data: [{ title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" }, { title: "新鲜柠檬250g/份", productImg: "./images/good1.png", newPrice: "¥13.6", oldPrice: "¥22.99" } ] } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { }, changeLeft_sroll(e) { var index = e.currentTarget.dataset.index; this.setData({ left_srcoll_index: index }) }, changeTop_sroll(e) { var index = e.currentTarget.dataset.index; var t_id = e.currentTarget.dataset.id; this.setData({ top_srcoll_index: index, rigId: t_id, }) }, scroll(e) { var that = this; var classfiySelect = ""; var scrollTop = e.detail.scrollTop; // console.log('scrollTop', scrollTop) var h = 0; var _h = that.length('01'); that.data.right_scroll_content.forEach(function(clssfiy, i) { var _h = that.length(clssfiy['id']) * (94 + 12); if (scrollTop >= h) { classfiySelect = clssfiy['id']; } h += _h; // console.log('h', h); }) classfiySelect = parseInt(classfiySelect) - 1; that.setData({ top_srcoll_index: classfiySelect, }) }, //求每一栏长度 length: function(e) { var that = this; var rightData = that.data.right_scroll_content; for (var i = 0; i < rightData.length; i++) { if (rightData[i]['id'] == e) { return rightData[i]['data'].length; } } },})

微信小程序实现商城 分类列表

微信小程序实现商城分类列表