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

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

要点：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！