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

我们先来看一下效果

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

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">
  <!-- 分类导航栏 S -->
  <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>
  <!-- 分类导航栏 E -->

  <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>

js

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;
}

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