微信小程序 分类-随右侧滚动
先上效果图
商品采用SKU规格商品，通过自定义popup组件，实现个性化效果
如果发现少发了某块，可以私信或者评论喔
编辑
编辑
编辑
编辑
wxml：
<wxs module="img" src="../../../wxs/files.wxs"></wxs>
<view class="container">
<view class="container2-header" style="height: {{navBarHeight}}px; {{background?'background:'+background:''}}">
<view class="container2-header-top">
<view class="container2-header-back">
<image src="/static/images/other/fanhui.png" bindtap="goBack"/>
<input placeholder="Search fir gifts"/>
<image class="search-icon" src="/static/images/other/sousuo.png"/>
<image class="message" src="/static/images/other/message.png"/>
</view>
</view>
</view>
<view class="container-header" style="padding-top: {{navBarHeight}}px; height: {{infoHeight}}px;">
<view class="font-cl" style="flex: 1; text-align: left;">Hi, {{userInfo.nickname}}</view>
<image src="/static/images/other/integral.png"/>
<text>{{userInfo.intergal}}</text>
</view>
<view style="display: flex;">
<scroll-view class='left-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollLeft" scroll-top="{{activeScrollTop}}" enable-back-to-top scroll-with-animation>
<block wx:for="{{products}}" wx:key="index">
<view class='left-son {{activeId === index ? "active" : "normal"}} {{activeId + 1 === index ? "right-top-radius" : ""}} {{activeId === index + 1 ? "right-bottom-radius":""}}' bindtap='clickLeft' id="{{index}}">
<image src="{{img.getFile(item.picPath)}}"/>
<text>{{item.title}}</text>
</view>
</block>
</scroll-view>
<!-- 右容器 -->
<scroll-view class='right-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollRight" scroll-into-view="{{toView}}" enable-back-to-top scroll-with-animation>
<block wx:for="{{products}}" wx:key="index">
<view class='right-son' id="{{'index'+index}}">
<text class="son-title">{{item.title}}</text>
<view class="product-item" wx:for="{{item.giftExchangeEntityList}}" wx:for-item="product" wx:for-index="innerIndex" wx:key="innerIndex" style="{{product.isNew === 0?'background-image: url(https://dashanbook.oss-cn-shenzhen.aliyuncs.com/app/images/2024/11/04/6f44957e42b34c8f91fbc8adeffb25ac.jpg)':''}}">
<image class="tip" src="https://dashanbook.oss-cn-shenzhen.aliyuncs.com/app/images/2024/11/04/82c948e461114e1dba6f819c2937dc5d.png" wx:if="{{product.isNew === 0}}"/>
<van-image width="100" height="100" src="{{img.getFile(product.picPath)}}" />
<view class="products-layout">
<view class="products-layout-item" bind:tap="clickGoods" data-goods="{{product}}">
<view>{{product.content}}</view>
<view class="item-content">
<view class="item-price">
<image src="/static/images/other/integral.png"/>
<text class="current-price font-cl">{{product.discountIntegral?product.discountIntegral:product.integral}}</text>
<text class="origin-price" wx:if="{{product.discountIntegral}}">{{product.integral}}</text>
</view>
<image src="/static/images/other/add.png" style="width: 58rpx; height: 58rpx;"/>
</view>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="fixed-bottom" wx:if="{{!addCartFlag}}">
<image src="/static/images/other/cart.png" bind:tap="showCartProduct"/>
<block wx:if="{{!canBuyFlag}}">
<view class="bottom-content">未选购礼品</view>
</block>
<block wx:else>
<view class="integral font-cl"><image src="/static/images/other/integral.png"/>{{discountPrice}}<text class="total-num">{{cartList.length}}</text></view>
<view class="discount">
<text class="origin-price">{{totalPrice}}</text>
<view class="discount-price">已优惠{{totalPrice - discountPrice}}</view>
</view>
</block>
<view class="bottom-btn {{canBuyFlag?'buy-btn':''}}" bind:tap="calculate">去结算</view>
</view>
</view>
<van-popup show="{{ addCartFlag }}" bind:close="onClosePopup" round position="bottom" custom-style="height: 50%; overflow-y: auto; z-index: 2000">
<view class="header-line"></view>
<view class="header-layout">
<image class="goods-img" src="{{img.getFile(selectGoods?(selectGoods.picPath?selectGoods.picPath:addGoodsInfo.picPath):addGoodsInfo.picPath)}}"/>
<view class="goods-content">
<text class="two-overellipsis">{{addGoodsInfo.content}}</text>
<text class="goods-storage">库存：{{selectGoods?selectGoods.stock:addGoodsInfo.giftCount}}</text>
</view>
</view>
<view class="cart-layout" wx:if="{{skuList != null && skuList.length > 0}}" style="height: 280rpx; overflow-y: auto;">
<view class="sku-item" wx:for="{{skuList}}" wx:key="index">
<view class="sku-title-son">{{item.lable}}</view>
<view style="flex: 1;">
<text class="label {{item.selected===value?'selected':''}}" wx:for="{{item.values}}" wx:for-item="value" wx:for-index="innerIndex" wx:key="innerIndex" bind:tap="clickSkuLabel" data-skuInfo="{{item}}" data-selectValue="{{value}}" data-index="{{index}}">{{value}}</text>
</view>
</view>
</view>
<view class="cart-layout" style="display: flex; margin-top: 20rpx; align-items: center;">
<text>积分：</text>
<view class="cart-num">
<text class="num-count">{{selectGoods?selectGoods.integral : (addGoodsInfo.discountIntegral?addGoodsInfo.discountIntegral : addGoodsInfo.integral)}}</text>
</view>
</view>
<view class="cart-layout" style="display: flex; margin-top: 20rpx; align-items: center;">
<text>购买数量：</text>
<view class="cart-num">
<text class="num-btn" bind:tap="reduceNum">-</text>
<text class="num-count">{{buyNum}}</text>
<text class="num-btn add" bind:tap="addNum">+</text>
</view>
</view>
<view class="goods-btn">
<text bind:tap="addCart">加入购物车</text>
<text class="buy" bind:tap="goExchange">立即兑换</text>
</view>
</van-popup>
<van-popup show="{{ showCartProduct }}" bind:close="onClosePopup" round position="bottom" custom-style="height: 40%; overflow-y: auto;">
<view class="header-line"></view>
<view class="header-layout"><view class="bold">商品详情</view><view bind:tap="clearCart"><image src="/static/images/other/shanchu.png"/><text class="cart-clear">清空购物车</text></view></view>
<view class="cart-layout" style="margin-bottom: 50rpx;">
<view class="cart-item" wx:for="{{cartList}}" wx:key="index">
<image class="cart-pic" src="{{img.getFile(item.spicPath?item.spicPath:item.picPath)}}"/>
<view class="cart-content">
<view class="two-overellipsis">{{item.content}}</view>
<view class="standard two-overellipsis" wx:if="{{item.spData}}">规格: {{item.spData}}</view>
<view class="flex-start">
<image src="/static/images/other/integral.png"/>
<text>{{item.sintegral?item.sintegral : (item.discountIntegral?item.discountIntegral : item.integral)}}</text>
</view>
</view>
<view class="cart-num">
<text class="num-btn" bind:tap="updateCartNum" data-cartInfo="{{item}}" data-index="{{index}}" data-num="-1">-</text>
<text class="num-count">{{item.buyNum}}</text>
<text class="num-btn add" bind:tap="updateCartNum" data-cartInfo="{{item}}" data-index="{{index}}" data-num="1">+</text>
</view>
</view>
</view>
</van-popup>
</view>wxss:
page {
height: calc(100vh - 200rpx);
overflow: auto;
}
.container {
height: calc(100vh - 0rpx);
overflow: hidden;
display: flex;
flex-direction: column;
}
.container-header {
height: 172rpx;
border-radius: 10rpx;
padding: 0 8%;
text-align: center;
display: flex;
align-items: center;
}
.container-header image {
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
}
.left-scroll{
/* rgb(248,249,250); */
background-color: #ffffff;
width: 168rpx;
/* float: left; */
}
.left-son{
width: 100%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
box-sizing: border-box;
}
.left-son image {
width: 60rpx;
height: 60rpx;
margin-bottom: 20rpx;
}
.left-son.active{
background: #fff;
/* border-left:10rpx outset rgb(81, 127, 226); */
}
.left-son text {
color: #D00001;
}
.normal {
background: #f3f3f3;
}
.right-bottom-radius {
/* border-bottom-right-radius: 30rpx; */
}
.right-top-radius {
border-top-right-radius: 30rpx;
}
.right-scroll{
float: right;
width: calc(100% - 180rpx - 20rpx);
margin-left: 20rpx;
}
.right-son{
}
.product-item {
display: flex;padding: 15rpx 30rpx;margin-bottom: 10rpx;
background: linear-gradient(to right, #FFFFFF, #FFF8E8);
border-radius: 30rpx;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.new {
background: linear-gradient(to right, #FFFFFF, #FFF8E8);
}
.son-title {
font-size: 24rpx;
color: #CBCBCB;
}
.tip {
position: absolute;
left: -1rpx;
top: -18rpx;
width: 120rpx;
height: 120rpx;
z-index: 100;
}
.container2-header {
height: auto;
background: white;
position: fixed;
width: 100%;
z-index: 100;
}
.container2-header-top {
font-size: 34rpx;
position: relative;
height: 100%;
}
.container2-header-back {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
height: 80rpx;
transform: translate(0, -10%);
}
.container2-header-back text {
position: relative;
letter-spacing: 2rpx;
font-size: 36rpx;
color: #000000;
}
.container2-header-back image{
width: 50rpx;
height: 50rpx;
}
.title-primary {
font-family: "cl";
position: absolute !important;
bottom: 0;
left: 50%;
transform: translate(-50%, -10%)
}
input {
width: 308rpx; height: 80%; border-radius: 2rem; background: #F2F2F2;margin-right: 20rpx;
padding: 0 20rpx; padding-left: 80rpx; color: #bcbcbc; font-size: 26rpx;
}
.search-icon {
position: absolute;
left: 70rpx;
width: 40rpx !important;
height: 40rpx !important;
}
.products-layout {
width: 100%;margin:10rpx 10rpx;height: 90px;
}
.products-layout-item {
display: flex;flex-direction: column;justify-content: space-between;height: 100%;
}
.item-content {
display: flex;align-items: center;
}
.item-content image {
width: 45rpx;
height: 45rpx;
}
.item-price {
display: flex;align-items: center;flex: 1;
}
.origin-price {
text-decoration: line-through;
color: #3A3A3A;
font-size: 24rpx;
}
.current-price {
position: relative;
top: