Implémentation des effets de classification de la barre latérale dans le centre commercial de mini-programmes WeChat

Cet article présente principalement en détail l'effet de classification de la barre latérale de la série de centres commerciaux du mini programme WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Dans le projet de centre commercial, il y en a généralement. pages de catégories.
La page de catégorie permet aux utilisateurs de trouver rapidement des produits associés. Prenons l'exemple de la catégorie de la barre latérale, comme indiqué ci-dessous

Analyse de la mise en page :

< /Boîte principale>
La case de gauche utilise un flux standard
La case de droite utilise un positionnement absolu (en haut, à droite)

wxml :

<!--主盒子-->
<view class="container">
 <!--左侧栏-->
 <view class="nav_left">
 <block wx:for="{{navLeftItems}}">
 <!--当前项的id等于item项的id，那个就是当前状态-->
 <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
 <view class="nav_left_items {{curNav == item.id ? &#39;active&#39; : &#39;&#39;}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>
 </block>
 </view>
 <!--右侧栏-->
 <view class="nav_right">
 <!--如果有数据，才遍历项-->
 <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
 <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
 <view class="nav_right_items">
  <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
  <!--用view包裹图片组合，如果有图片就用，无图片提供就使用50x30的这个默认图片-->
  <view>
  <block wx:if="{{item.tree.logo}}">
  <image src="{{item.tree.logo}}"></image>
  </block>
  <block wx:else>
  <image src="http://temp.im/50x30"></image>
  </block>
  </view>
  <!--如果有文字，就用文字；无文字就用其他-->
  <view wx:if="{{item.tree.desc}}">
  <text>{{item.tree.desc}}</text>
  </view>
  <view wx:else>
  <text>{{item.tree.desc2}}</text>
  </view>
  </navigator>
 </view>
 </block>
 </view>
 <!--如果无数据，则显示数据-->
 <view wx:else>暂无数据</view>
 </view>
</view>

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

})

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Veuillez y prêter attention. plus de contenu connexe. Site Web chinois PHP !

Recommandations associées :

Outils requis pour le développement du système de centre commercial du mini programme WeChat

Système de centre commercial du mini programme WeChat Introduction à la structure de répertoires de développement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!