微信小程序】仿京东商品分类界面

要点：

1、左右两侧可以各自滑动，互不影响 → absolute布局

2、商品根据不同数量自适应排列 → flex-wrap的应用

3、切换左侧导航后，右侧显示对应变化，且默认显示在顶部位置 → scroll-view标签，设置scroll-top值为0

<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}}"><!--顶部图片--><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:'菜单1'},{screenId: 2,screenName: '菜单2'},{screenId: 3,screenName: '菜单3'},{screenId: 4,screenName: '菜单4'},{screenId: 5,screenName: '菜单5'},{screenId: 6,screenName: '菜单6'}], //左侧导航栏内容screenId: "",  //后台查询需要的字段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: '糖果'},{screenId: 2,showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=46574630,3801160495&fm=26&gp=0.jpg',screenName: '新疆核桃'},{screenId: 2,showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=46574630,3801160495&fm=26&gp=0.jpg',screenName: '新疆核桃'},{screenId: 2,showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=46574630,3801160495&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手机'},{screenId: 1,showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=1138662413,2627006305&fm=26&gp=0.jpg',screenName: 'vivo手机'},]},]}, //右侧内容},onLoad: function (options) {var that = this;},navbarTap: function (e) {var that = this;console.log(e);this.setData({currentTab: e.currentTarget.id,   //按钮CSS变化screenId: e.currentTarget.dataset.screenid,scrollTop: 0,   //切换导航后，控制右侧滚动视图回到顶部})//刷新右侧内容的数据var screenId = this.data.screenId;},
})

/**分类栏**/
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}
.classify{margin-top:100rpx;
}
.left-navbar{position:absolute;left:0;width:25%;height:90%;background-color:#eee;font-size:15px;
}
.left-navbar view{height:80rpx;line-height: 80rpx;text-align:center;
}
.active{background-color:#FFF;color:red;font-size:17px;
}
#right{position:absolute;right:0;width:75%;height:90%;
}
.img-banner{height:150rpx;width:100%;
}
.goods-list{display:flex;flex-wrap:wrap;margin-top:30rpx;
}
.goods-title{width:100%;font-size:15px;font-weight:bold;padding-left:10rpx;
}
.goods{width:150rpx;font-size:14px;margin:15rpx;text-align:center;
}
.img{width:140rpx;height:140rpx;
}

微信小程序】仿京东商品分类界面相关推荐

微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
微信小程序仿京东优惠券
效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578/12314561 .wxml ...
微信小程序仿京东省市县地址选择
效果图因为是外包项目,代码以实现功能为要求而已,轻喷. 小程序部分代码 wxml <view class="page"> <view class="c ...
到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建头部模块的搭建比较简 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...

微信小程序】仿京东商品分类界面

微信小程序】仿京东商品分类界面

微信小程序】仿京东商品分类界面相关推荐

最新文章

热门文章