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

我们先来看一下效果

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

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>

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

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

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

微信小程序】仿京东商品分类界面
微信小程序]仿京东商品分类界面要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化 ...
微信小程序注册入口及流程（完整版教程）
微信小程序注册是免费的,在腾讯云微信公众平台即可注册,无论是个人.企业都可以免费注册微信小程序,先输入邮箱注册激活,然后填写主体类型对应的证件信息,最后管理员身份验证使用维信扫一扫即可,小程序5来详细 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序自定义底部栏凸起效果+自定义扫码详细介绍
项目结构: 主页面图: 扫码界面: 使用步骤如下: - **第一步**:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替 ...
【微信小程序】仿京东商品分类界面
图示:(京东左) 要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化,且默认显示在 ...
微信小程序 # 高仿解忧杂货店小程序首页
效果图大概这样实现原理 1 "使用说明"(截图右上角的问号点击
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文微信小程 ...
微信小程序实战-仿盒马鲜生
盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分项目功能 * 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面小程序设计过程 ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...

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

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

最新文章

热门文章