小程序商城中侧栏分类效果怎么弄

这篇文章给大家分享的是有关小程序商城中侧栏分类效果怎么弄的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联为企业提供：成都品牌网站建设、网络营销策划、微信平台小程序开发、营销型网站建设和网站运营托管，一站式网络营销整体服务。实现不断获取潜在客户之核心目标，建立了企业专属的“营销型网站建设”，就用不着再为了获取潜在客户而苦恼，相反，客户会主动找您，生意就找上门来了！

在商场项目中，一般都会有分类页面。
分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图

布局分析：

<主盒子>
<左盒子>
<右盒子>

左盒子使用标准流
右盒子使用绝对定位（top、right）

wxml：

 
 
  
  
  
  
  
 {{item.tree.desc}} 
  
  
  
  
  
  
  
  
   
   
    
   
   
   
   
   
   
   
   
   
  {{item.tree.desc}} 
   
   
  {{item.tree.desc2}} 
   
   
  
  
  
  
 暂无数据 
  

wxss：

page{ 
 background: #f5f5f5; 
} 
/*总体主盒子*/ 
.container { 
 position: relative; 
 width: 100%; 
 height: 100%; 
 background-color: #fff; 
 color: #939393; 
} 
 
/*左侧栏主盒子*/ 
.nav_left{ 
 /*设置行内块级元素（没使用定位）*/ 
 display: inline-block; 
 width: 25%; 
 height: 100%; 
 /*主盒子设置背景色为灰色*/ 
 background: #f5f5f5; 
 text-align: center; 
} 
/*左侧栏list的item*/ 
.nav_left .nav_left_items{ 
 /*每个高30px*/ 
 height: 30px; 
 /*垂直居中*/ 
 line-height: 30px; 
 /*再设上下padding增加高度，总高42px*/ 
 padding: 6px 0; 
 /*只设下边线*/ 
 border-bottom: 1px solid #dedede; 
 /*文字14px*/ 
 font-size: 14px; 
} 
/*左侧栏list的item被选中时*/ 
.nav_left .nav_left_items.active{ 
 /*背景色变成白色*/ 
 background: #fff; 
} 
 
/*右侧栏主盒子*/ 
.nav_right{ 
 /*右侧盒子使用了绝对定位*/ 
 position: absolute; 
 top: 0; 
 right: 0; 
 flex: 1; 
 /*宽度75%，高度占满，并使用百分比布局*/ 
 width: 75%; 
 height: 100%; 
 padding: 10px; 
 box-sizing: border-box; 
 background: #fff; 
} 
/*右侧栏list的item*/ 
.nav_right .nav_right_items{ 
 /*浮动向左*/ 
 float: left; 
 /*每个item设置宽度是33.33%*/ 
 width: 33.33%; 
 height: 80px; 
 text-align: center; 
} 
.nav_right .nav_right_items image{ 
 /*被图片设置宽高*/ 
 width: 50px; 
 height: 30px; 
} 
.nav_right .nav_right_items text{ 
 /*给text设成块级元素*/ 
 display: block; 
 margin-top: 5px; 
 font-size: 10px; 
 /*设置文字溢出部分为...*/ 
 overflow: hidden; 
 white-space: nowrap; 
 text-overflow: ellipsis; 
}

js：

Page({ 
 data: { 
 navLeftItems: [], 
 navRightItems: [], 
 curNav: 1, 
 curIndex: 0 
 }, 
 onLoad: function() { 
 // 加载的使用进行网络访问，把需要的数据设置到data数据对象 
 var that = this  
 wx.request({ 
  url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList', 
  method: 'GET', 
  data: {}, 
  header: { 
  'Accept': 'application/json' 
  }, 
  success: function(res) { 
  console.log(res) 
  that.setData({ 
   navLeftItems: res.data, 
   navRightItems: res.data 
  }) 
  } 
 }) 
 }, 
 
 //事件处理函数 
 switchRightTab: function(e) { 
 // 获取item项的id，和数组的下标值 
 let id = e.target.dataset.id, 
  index = parseInt(e.target.dataset.index); 
 // 把点击到的某一项，设为当前index 
 this.setData({ 
  curNav: id, 
  curIndex: index 
 }) 
 } 
 
})

感谢各位的阅读！关于“小程序商城中侧栏分类效果怎么弄”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！