<view class="section"> <!-- 左侧类型 --> <scroll-view scroll-y="true" class="left"> <view wx:for="{{types}}" wx:key="typeId" data-type-id="{{item.id}}" bindtap="tapType" class="{{item.id == currType ? 'active' : ''}}" style="font-size:33rpx"> {{item.name}} </view> </scroll-view> <!-- 右侧数据 --> <scroll-view scroll-y="true" class="right"> <view class="typeTree"> <view class="brand" wx:for="{{typeTree}}" wx:for-item="data"> <navigator url="../listdetail/listdetail?cat_id={{data.id}}" wx:key="typeId" class="item"> <image src="{{data.bz_1}}"></image> <text>{{data.name}}</text> </navigator> </view> </view> </scroll-view> </view> |
.section{ position: absolute; width: 100%; height: 100% ; overflow: hidden;} .left{ position: absolute; left: 0; top: 0; height: 100%; width: 90px; background: #F6F6F6; text-align: center;font-size:28rpx;} .left::before{ content: ""; position: absolute; background: #dcdcdc; right: 0; top: 0; height: 100%; border-right: 1rpx solid #dcdcdc;} .left view.active{ background: #FFF; position: relative; z-index: 2;} .left view{ display: block; height: 60px; line-height: 60px; border-bottom: 1px solid #dcdcdc;} .right{ margin-left: 90px; height: 100%; overflow: hidden; width: auto;background: #fff;} .right text{ font-size: 15px} .typeTree{ padding: 10px 20px;width: 100%} .typeTree .item{ text-align: center; display: inline-block; vertical-align: top;margin-left:14%;} .typeTree .brand, .typeTree .category{ flex-wrap: wrap; overflow: hidden;display: inline-block;width: 40%} .typeTree .title{ padding: 10px 0; display: block; color: #333;} .typeTree image { width: 100px; margin: 0 auto;} .typeTree .brand image{ height: 100px;} .typeTree .category image{ height: 85px;} .typeTree .category{ padding-bottom: 10px;} .item text{ padding-bottom: 10px; display: block;} |
// import ApiList from '../../config/api'; // import request from '../../utils/request.js'; //获取应用实例 var app = getApp(); Page({ data: { // types: null, typeTree: {}, // 数据缓存 currType: 0 , // 当前类型 types: [], typeTree: [], }, onLoad: function (option){ var that = this; wx.request({ url: app.d.ceshiUrl + '/Api/Category/index', method:'post', data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { //--init data var status = res.data.status; if(status==1) { var list = res.data.list; var catList = res.data.catList; var firstId= res.data.list[0].id; that.setData({ currType:firstId, types:list, typeTree:catList, }); } else { wx.showToast({ title:res.data.err, duration:2000, }); } }, error:function(e){ wx.showToast({ title:'网络异常!', duration:2000, }); } }); }, tapType: function (e){ var that = this; const currType = e.currentTarget.dataset.typeId; that.setData({ currType: currType }); console.log(currType); wx.request({ url: app.d.ceshiUrl + '/Api/Category/getcat', method:'post', data: {cat_id:currType}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { var status = res.data.status; if(status==1) { var catList = res.data.catList; that.setData({ typeTree:catList, }); } else { wx.showToast({ title:res.data.err, duration:2000, }); } }, error:function(e){ wx.showToast({ title:'网络异常!', duration:2000, }); } }); }, // 加载品牌、二级类目数据 getTypeTree (currType) { const me = this, _data = me.data; if(!_data.typeTree[currType]){ request({ url: ApiList.goodsTypeTree, data: {typeId: +currType}, success: function (res) { _data.typeTree[currType] = res.data.data; me.setData({ typeTree: _data.typeTree }); } }); } } }) |
模板简介:该模板名称为【微信小程序商城左侧可点菜单导航列表样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。