微信小程序高仿京东分类效果完整版(超详细)

超、凢脫俗 2023-07-25 06:18 86阅读 0赞

我们先来看一下效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

下面我们直接上代码,很简单

wxml

<view class="classify-head">
      <view class="classify-search" bindtap="skipSearch">
        <image class="icon-sou" src="../../../img/icon/icon-search.png"></image>
        <view class="sou-con price">123</view>
      </view>
    </view>
    <view class="classify">
      
      <scroll-view class="left-navbar" scroll-y="true">
        <view wx:for="{
       {screenArray}}" class="{
       { currentTab == index ? 'active' : '' }}" wx:key="unique" bindtap="{
       { currentTab != index ? 'navbarTap':'' }}" id="{
       {index}}" data-screenId="{
       {item.screenId}}">{
       {item.screenName}}
        </view>
      </scroll-view>
      
    
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==1}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==1}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==2}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArrayTwo.showImageUrl}}" wx:if="{
       {childrenArrayTwo.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArrayTwo.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==3}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==4}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==5}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==6}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==7}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==8}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==9}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==10}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view id="right" scroll-y="true" scroll-top="{
       {scrollTop}}" wx:if="{
       {screenId==11}}">
        
        <view class="goods-banner">
          <image class="img-banner" src="{
       {childrenArray.showImageUrl}}" wx:if="{
       {childrenArray.showImageUrl}}" mode="scaleToFill"></image>
        </view>
        
        <view class="goods-list" wx:for="{
       {childrenArray.childrenScreenArray}}" wx:key="unique">
          <view class="goods-title">{
       {item.screenName}}</view>
          <view wx:for="{
       {item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{
       {item.screenName}}" >
            <image class="img" src="{
       {item.showImageUrl}}" wx:if="{
       {item.showImageUrl}}"></image>
            <text>{
       {item.screenName}}</text>
          </view>
        </view>
      </scroll-view>
    </view>

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        currentTab: 0, //对应样式变化
        scrollTop: 0, //用作跳转后右侧视图回到顶部
        screenArray: [{
            screenId: 1,
            screenName: '热搜推荐'
          },
          {
            screenId: 2,
            screenName: '家用电器'
          },
          {
            screenId: 3,
            screenName: '家居/建材'
          },
          {
            screenId: 4,
            screenName: '手机/数码'
          },
          {
            screenId: 5,
            screenName: '美妆个护'
          },
          {
            screenId: 6,
            screenName: '服饰/内衣'
          },
          {
            screenId: 7,
            screenName: '箱包/首饰'
          },
          {
            screenId: 8,
            screenName: '母婴/玩具'
          },
          {
            screenId: 9,
            screenName: '食品生鲜/特产'
          },
          {
            screenId: 10,
            screenName: '健康保健/情趣'
          },
          {
            screenId: 11,
            screenName: '农资绿植/礼品'
          }
        ], //左侧导航栏内容
        screenId: "1", //后台查询需要的字段
        childrenArray: {
          showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=1798233457,4143585420&fm=26&gp=0.jpg',
          childrenScreenArray: [{
              screenName: '休闲零食',
              childrenScreenArray: [{
                screenId: 1,
                showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=921197123,1741426939&fm=26&gp=0.jpg',
                screenName: '糖果'
              }, ]
            },
            {
              screenName: '手机数码',
              childrenScreenArray: [{
                screenId: 1,
                showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=1138662413,2627006305&fm=26&gp=0.jpg',
                screenName: 'vivo手机'
              }, ]
            },
          ]
        }, //右侧内容
        childrenArrayTwo: {
          // showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=1798233457,4143585420&fm=26&gp=0.jpg',
          childrenScreenArray: [{
            screenName: '休闲零食',
            childrenScreenArray: [{
              screenId: 1,
              showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=921197123,1741426939&fm=26&gp=0.jpg',
              screenName: '糖果'
            },]
          },
          {
            screenName: '手机数码',
            childrenScreenArray: [{
              screenId: 1,
              showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=1138662413,2627006305&fm=26&gp=0.jpg',
              screenName: 'vivo手机'
            },]
          },
          ]
        } //右侧内容
      },
      /**
       * 导航切换
       */
      navbarTap: function(e) {
        var that = this;
        this.setData({
          currentTab: e.currentTarget.id, //按钮CSS变化
          screenId: e.currentTarget.dataset.screenid,
          scrollTop: 0, //切换导航后，控制右侧滚动视图回到顶部
        })
        //刷新右侧内容的数据
        var screenId = this.data.screenId;
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      }
    })

wxss

/* 头部 */
    .classify-head {
      width: 100%;
      height: 100rpx;
      background: white;
      border-top:1px solid #DCDCDC;
      border-bottom: 1px solid #DCDCDC;
      display: flex;
      justify-content: center;
    }
    .classify-search {
      width: 90%; 
      height:60rpx;
      background: #eee; 
      border-radius: 30rpx;
      align-self: center;
      display: flex;
      justify-content: center;
    }
    .icon-sou {
      width: 35rpx;
      height: 35rpx;
      align-self: center;
      margin-right: 10rpx;
    }
    .sou-con {
      align-self: center;
      color: #808080;
    }
    /**分类栏**/
    .left-navbar{
      position:absolute;
      left:0;
      width:25.5%;
      height:90%;
      background-color:#eee;
      font-size:25rpx;
    }
    .left-navbar view{
      height:110rpx;
      line-height: 110rpx;
      text-align:center;
    }
    .active{
      background-color: white;
      color:red;
      font-size:30rpx;
    }
    #right{
      position:absolute;
      right:0;
      width:75%;
      height:90%;
      background: white;
    }
    .goods-banner {
      padding: 20rpx;
    }
    .img-banner{
      height:150rpx;
      width:100%;
    }
    .goods-list{
      display:flex;
      flex-wrap:wrap;
      margin-top:30rpx;
    }
    .goods-title{
      width:100%;
      font-size: 35rpx;
      font-weight: bold;
      padding: 0 20rpx;
    }
    .goods{
      width:140rpx;
      font-size:35rpx;
      margin:30rpx 0 10rpx 38rpx;
      text-align:center;
    }
    .goods:nth-child(4n) {
      margin-right: 0; 
    }
    .img{
      width:140rpx;
      height:140rpx;
    }

以上就是所有分类代码,如果对你有帮助浪费你几秒时间点下赞关注支持一下,谢谢

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230528/30b9d981d666485abe7336f892185225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20230528/2268c4ad5d14465aa34f3db293941a8c.png