商品列表右,微信小程序的归类页面制作

2019-06-14 作者:web前端   |   浏览(120)

微信小程序实的分类页面制作

哈喽,大家好,又到周五啦,今天代码君要教大家分类页面的制作,废话不多说,先上效果图

上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动

先上效果图。

图片 1

一、关键技术:

图片 2

分类页面.gif

(1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 获取到的值是 px,所以存在rpx 转 px 的问题。以 iPhone6 为基准,转换公式:

这个界面布局难度不是很大,css基础好的,很快就实现了,分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据

这个界面布局难度不是很大,css基础好的,很快就实现了,分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据。

// percent 为当前设备1rpx对应的px值

这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据。

代码的实现

  1. classify.js
Page({
  data: {
    cateItems: [
      {
        cate_id: 1,
        cate_name: "护肤",
        ishaveChild: true,
        children:
        [
          {
            child_id: 1,
            name: '洁面皂',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
          },
          {
            child_id: 2,
            name: '卸妆',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
          },
          {
            child_id: 3,
            name: '洁面乳',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
          },
          {
            child_id: 4,
            name: '面部祛角质',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }
        ]
      },
      {
        cate_id: 2,
        cate_name: "彩妆",
        ishaveChild: true,
        children:
        [
          {
            child_id: 1,
            name: '气垫bb',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"
          },
          {
            child_id: 2,
            name: '修容/高光',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"
          },
          {
            child_id: 3,
            name: '遮瑕',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"
          },
          {
            child_id: 4,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"
          },
          {
            child_id: 5,
            name: '粉饼',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"
          },
          {
            child_id: 6,
            name: '粉底',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"
          },
          {
            child_id: 7,
            name: '蜜粉/散粉',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"
          },
          {
            child_id: 8,
            name: '隔离霜',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"
          }
        ]
      },
      {
        cate_id: 3,
        cate_name: "香水/香氛",
        ishaveChild: true,
        children:
        [
          {
            child_id: 1,
            name: '淡香水EDT',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"
          },
          {
            child_id: 2,
            name: '浓香水EDP',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"
          },
          {
            child_id: 3,
            name: '香体走珠',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"
          },
          {
            child_id: 4,
            name: '古龙香水男士的最爱',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"
          }
        ]
      },
      {
        cate_id: 4,
        cate_name: "个人护理",
        ishaveChild: false,
        children: []
      }
    ],
    curNav: 1,
    curIndex: 0
  },

  //事件处理函数  
  switchRightTab: function (e) {
    // 获取item项的id,和数组的下标值  
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把点击到的某一项,设为当前index  
    this.setData({
      curNav: id,
      curIndex: index
    })
  }
})  

js的代码有点长,但是宏观看一下逻辑就很清晰了

  • cateItems 展示的数据
  • curNav 控制当前那个按钮点亮
  • curIndex 根据此参数来拿第几个分类的数据
  • switchRightTab 分类tab事件的处理

cateItems里的数据每一个对象都是一个品类的数据,拿第一个品类护肤来说,

  • cate_id 识别的id
  • cate_name 一级分类名称
  • ishaveChild 判断是否有子集
  • children 二级目录的数据
  1. classify.wxml
<!--主盒子-->
<view class="container">
  <!--左侧栏-->
  <view class="nav_left">
    <block wx:for="{{cateItems}}">
      <!--当前项的id等于item项的id,那个就是当前状态-->
      <!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用-->
      <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
    </block>
  </view>
  <!--右侧栏-->
  <view class="nav_right">
    <!--如果有数据,才遍历项-->
    <view wx:if="{{cateItems[curIndex].ishaveChild}}">
      <block wx:for="{{cateItems[curIndex].children}}">
        <view class="nav_right_items">
        <!--界面跳转 -->
          <navigator url="../../detail/detail}}">
            <image src="{{item.image}}"></image>
            <text>{{item.name}}</text>
          </navigator>
        </view>
      </block>
    </view>
    <!--如果无数据,则显示数据-->
    <view class="nodata_text" wx:else>该分类暂无数据</view>
  </view>
</view>

这里面要讲解的有

  • nav_left_items {{curNav == item.cate_id ? 'active' : ''}} 在classify.js代码中已经说了curNav的作用,就是在这里实现的,根据是否和一级目录cate_id相同,来判断是否点亮文字。相同执行.nav_left_items.active样式,不相同则执行.nav_left_items样式
  • wx:for 和wx: if的知识点,这放在下面讲,请继续往下看
  1. classify.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: 40px;  
  /*垂直居中*/  
  line-height: 40px;  
  /*再设上下padding增加高度,总高42px*/  
  padding: 6px 0;  
  /*只设下边线*/  
  border-bottom: 1px solid #dedede;  
  /*文字14px*/  
  font-size: 14px; 
}  
/*左侧栏list的item被选中时*/  
.nav_left .nav_left_items.active{  
  /*背景色变成白色*/  
  background: #fff;  
  color: #f0145a; 
}  
/*右侧栏主盒子*/  
.nav_right{  
  /*右侧盒子使用了绝对定位*/  
  position: absolute;  
  top: 0;  
  right: 0;  
  flex: 1;  
  /*宽度75%,高度占满,并使用百分比布局*/  
  width: 75%;  
  height: 1000px;  
  padding: 10px;  
  box-sizing: border-box;  
  background: #fff;  
}  
/*右侧栏list的item*/  
.nav_right .nav_right_items{  
  /*浮动向左*/  
  float: left;  
  /*每个item设置宽度是33.33%*/  
  width: 33.33%;  
  height: 120px;  
  text-align: center;  
}  
.nav_right .nav_right_items image{  
  /*被图片设置宽高*/  
  width: 60px;  
  height: 60px;  
  margin-top: 15px;  
}  
.nav_right .nav_right_items text{  
  /*给text设成块级元素*/  
  display: block;  
  margin-top: 15px;  
  font-size: 14px;  
  color: black;
  /*设置文字溢出部分为...*/  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nodata_text
{
  color: black;
  font-size: 14px;  
  text-align: center;  
} 

这里有个小技巧分享给大家

  • 要设置字体垂直居中要肿么办呐?
    看我布局的样式【.nav_left .nav_left_items】把height与line-height两个属性设置成一样的就可以轻松实现字体垂直居中,但是这个有局限性,是字体要是单行的,为什么呐,因为line-height本身就是设置行高
  • 单行文字过长部分要用省略号应该如何写样式呐? 效果是酱紫 xxxxx...
    overflow: hidden;
    white-space: nowrap; //设置单行显示
    text-overflow: ellipsis;

var percent = res.windowWidth / 750;

代码的实现

知识小课堂

  1. wx:for
    微信小程序列表的渲染,我们之前做首页的时候就有接触过用于循环数组,展示列表型数据
  • 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>
  • 也可以自定义变量表使用 wx:for-item可以指定数组当前元素的变量名
    使用wx:for-index可以指定数组当前下标的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
  1. wx:if
    微信小程序条件渲染,通常是在if里面写判断语句,满足条件就执行这个view控件,通常有if对应就有else,对应的不满足if条件就执行else对应的view控件
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

我们要把** wx:if 和 hidden **做对比,他们都可以实现让控件显示与隐藏,但是他们有什么区别呐,if是当满足条件的时候才会渲染view,而hidden是view一定会被渲染,只不过控制显示与隐藏罢了,那么我们要如何区分什么时机用什么方法呐?
一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

详情参考:WXSS尺寸单位

classify.js
Page({
data: {
 cateItems: [
  {
   cate_id: 1,
   cate_name: "护肤",
   ishaveChild: true,
   children:
   [
    {
     child_id: 1,
     name: '洁面皂',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
    },
    {
     child_id: 2,
     name: '卸妆',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
    },
    {
     child_id: 3,
     name: '洁面乳',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
    },
    {
     child_id: 4,
     name: '面部祛角质',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
    }
   ]
  },
  {
   cate_id: 2,
   cate_name: "彩妆",
   ishaveChild: true,
   children:
   [
    {
     child_id: 1,
     name: '气垫bb',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"
    },
    {
     child_id: 2,
     name: '修容/高光',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"
    },
    {
     child_id: 3,
     name: '遮瑕',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"
    },
    {
     child_id: 4,
     name: '腮红',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"
    },
    {
     child_id: 5,
     name: '粉饼',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"
    },
    {
     child_id: 6,
     name: '粉底',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"
    },
    {
     child_id: 7,
     name: '蜜粉/散粉',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"
    },
    {
     child_id: 8,
     name: '隔离霜',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"
    }
   ]
  },
  {
   cate_id: 3,
   cate_name: "香水/香氛",
   ishaveChild: true,
   children:
   [
    {
     child_id: 1,
     name: '淡香水EDT',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"
    },
    {
     child_id: 2,
     name: '浓香水EDP',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"
    },
    {
     child_id: 3,
     name: '香体走珠',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"
    },
    {
     child_id: 4,
     name: '古龙香水男士的最爱',
     image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"
    }
   ]
  },
  {
   cate_id: 4,
   cate_name: "个人护理",
   ishaveChild: false,
   children: []
  }
 ],
 curNav: 1,
 curIndex: 0
},

//事件处理函数 
switchRightTab: function (e) {
 // 获取item项的id,和数组的下标值 
 let id = e.target.dataset.id,
  index = parseInt(e.target.dataset.index);
 // 把点击到的某一项,设为当前index 
 this.setData({
  curNav: id,
  curIndex: index
 })
}
})

总结

好了,分类页面的制作完成了,今天新增一个知识小课堂,目的很简单,就是想把涉及到的知识要点归类整理,方便读者查阅。今天就到这,祝大家周末愉快~

(2) 微信自带scroll-view UI组件,通过 bindscroll="scroll" 绑定滚动事件;通过 scroll-top="{{scrollTop}}" 动态控制 左侧滑栏的被动滚动。

js的代码有点长,但是宏观看一下逻辑就很清晰了

上一篇:微信小程序实战篇-下拉刷新与加载更多

图片 3

二、实现思路:

  1. cateItems 展示的数据
  2. curNav 控制当前那个按钮点亮
  3. curIndex 根据此参数来拿第几个分类的数据
  4. switchRightTab 分类tab事件的处理
建了一个小程序技术交流群,想入群的读者请加微信

图片 4

小程序入群.png

通过计算整个右侧滑栏滚动上去的高度 与 右侧滑栏中每一个分类距顶部的距离做比对,获取到该滚动置顶的分类的 index 。然后用获取到的 index 乘以左侧滑栏中某一项的高度,动态赋值给左侧滑栏内的 scrollTop ,控制左侧滑栏的联动。

cateItems里的数据每一个对象都是一个品类的数据,拿第一个品类护肤来说,

以下是代码,考虑到部分新手同学,几乎为每一行代码添加了注释。

  1. cate_id 识别的id
  2. cate_name 一级分类名称
  3. ishaveChild 判断是否有子集
  4. children 二级目录的数据

wxml代码:标签中属性如有不懂,请自行查看小程序API,内有详细讲解!

classify.wxml

<view class="container"> 

<!--主盒子-->
<view class="container">
<!--左侧栏-->
<view class="nav_left">
 <block wx:for="{{cateItems}}">
  <!--当前项的id等于item项的id,那个就是当前状态-->
  <!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用-->
  <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
 </block>
</view>
<!--右侧栏-->
<view class="nav_right">
 <!--如果有数据,才遍历项-->
 <view wx:if="{{cateItems[curIndex].ishaveChild}}">
  <block wx:for="{{cateItems[curIndex].children}}">
   <view class="nav_right_items">
   <!--界面跳转 -->
    <navigator url="../../detail/detail}}">
     <image src="{{item.image}}"></image>
     <text>{{item.name}}</text>
    </navigator>
   </view>
  </block>
 </view>
 <!--如果无数据,则显示数据-->
 <view class="nodata_text" wx:else>该分类暂无数据</view>
</view>
</view>

  <!--左侧栏-->

这里面要讲解的有

  <scroll-view class='scroll_left' scroll-y="true" style="height:{{winHeight}}px;" scroll-with-animation="true" scroll-top="{{scrollTop}}">

  1. nav_left_items {{curNav == item.cate_id ? 'active' : ''}} 在classify.js代码中已经说了curNav的作用,就是在这里实现的
  2. 根据是否和一级目录cate_id相同,来判断是否点亮文字。相同执行.nav_left_items.active样式,不相同则执行.nav_left_items样式
  3. wx:for 和wx: if的知识点,这放在下面讲,请继续往下看

    <view class="nav_left">

classify.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: 40px; 
/*垂直居中*/ 
line-height: 40px; 
/*再设上下padding增加高度,总高42px*/ 
padding: 6px 0; 
/*只设下边线*/ 
border-bottom: 1px solid #dedede; 
/*文字14px*/ 
font-size: 14px; 
} 
/*左侧栏list的item被选中时*/ 
.nav_left .nav_left_items.active{ 
/*背景色变成白色*/ 
background: #fff; 
color: #f0145a; 
} 
/*右侧栏主盒子*/ 
.nav_right{ 
/*右侧盒子使用了绝对定位*/ 
position: absolute; 
top: 0; 
right: 0; 
flex: 1; 
/*宽度75%,高度占满,并使用百分比布局*/ 
width: 75%; 
height: 1000px; 
padding: 10px; 
box-sizing: border-box; 
background: #fff; 
} 
/*右侧栏list的item*/ 
.nav_right .nav_right_items{ 
/*浮动向左*/ 
float: left; 
/*每个item设置宽度是33.33%*/ 
width: 33.33%; 
height: 120px; 
text-align: center; 
} 
.nav_right .nav_right_items image{ 
/*被图片设置宽高*/ 
width: 60px; 
height: 60px; 
margin-top: 15px; 
} 
.nav_right .nav_right_items text{ 
/*给text设成块级元素*/ 
display: block; 
margin-top: 15px; 
font-size: 14px; 
color: black;
/*设置文字溢出部分为...*/ 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
} 
.nodata_text
{
color: black;
font-size: 14px; 
text-align: center; 
}

      <block wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this"> 

这里有个小技巧分享给大家 

        <!--当前项的id等于item项的id,那个就是当前状态--> 

要设置字体垂直居中要肿么办呐?

        <!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用--> 

看我布局的样式【.nav_left .nav_left_items】把height与line-height两个属性设置成一样的就可以轻松实现字体垂直居中,但是这个有局限性,是字体要是单行的,为什么呐,因为line-height本身就是设置行高

        <view class="nav_left_items {{curNav == idx ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}">{{itemName[0].title}}</view> 

单行文字过长部分要用省略号应该如何写样式呐? 效果是酱紫 xxxxx...

      </block> 

overflow: hidden;
white-space: nowrap; //设置单行显示
text-overflow: ellipsis;

    </view>

知识小课堂

  </scroll-view>

1.wx:for

  <!--右侧栏-->

微信小程序列表的渲染,我们之前做首页的时候就有接触过用于循环数组,展示列表型数据

  <scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" bindscroll="scroll">

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

    <view class="nav_right">

<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>

      <view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">

也可以自定义变量表使用 wx:for-item可以指定数组当前元素的变量名

        <view class='minl' id='{{idx}}'>{{itemName[0].title}}</view>

使用wx:for-index可以指定数组当前下标的变量名

          <block wx:for="{{itemName}}" wx:key="*this" wx:for-index="idex">

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>

            <view class="nav_right_items" wx:if="{{idex>0}}"> 

2.wx:if

              <navigator url="../detail/detail" hover-class="other-navigator-hover">

微信小程序条件渲染,通常是在if里面写判断语句,满足条件就执行这个view控件,通常有if对应就有else,对应的不满足if条件就

                <view> 

3.执行else对应的view控件。

                  <image src="{{item.picture}}"></image>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

                  <view > 

我们要把 wx:if 和 hidden 做对比,他们都可以实现让控件显示与隐藏,但是他们有什么区别呐,if是当满足条件的时候才会渲染

                    <text>{{item.desc}}</text> 

5.view,而hidden是view一定会被渲染,只不过控制显示与隐藏罢了,那么我们要如何区分什么时机用什么方法呐?
一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,

                  </view>

6.如果在运行时条件不大可能改变则wx:if较好。

                </view> 

总结

              </navigator> 

好了,分类页面的制作完成了,

            </view>     

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

          </block>

您可能感兴趣的文章:

  • 微信小程序开发中的疑问解答汇总
  • 详解微信小程序设置底部导航栏目方法
  • 微信小程序之网络请求简单封装实例详解
  • 详解微信小程序 登录获取unionid
  • 微信小程序与php 实现微信支付的简单实例
  • 详解微信小程序 同步异步解决办法
  • 详解微信小程序 template添加绑定事件
  • 微信小程序 Buffer缓冲区的详解

        </view>

      <view style="width:100%;height:30rpx;background:#f0f4f7"></view>     

    </view>

  </scroll-view>

</view> 

js代码:

// pages/list-1/list-1.js

var list = require('../../utils/list.js')

Page({

  data: {

    // 左侧点击类样式

    curNav: 'A',

    scrollTop: 0,

    // 定义一个空数组,用来存放右侧滑栏中每一个商品分类的 Height

    listHeight:''

  },

  // 生命周期函数--监听页面初次渲染完成

  onReady: function () {

    var that = this;

    // 定义右侧标题的 rpx 高度 和 px 高度

    var right_titleRpxHeight = 60;

    var right_titleHeight;

    // 定义右侧单个商品的 rpx 高度 和 px 高度

    var right_contentRpxHeight = 180;

    var right_contentHeight;

    // 定义左侧单个tab的 rpx 高度 和 px 高度

    var left_titleRpxHeight = 140;

    var left_titleHeight;

    //  获取可视区屏幕高度

    wx.getSystemInfo({

      success: function (res) {

        // percent 为当前设备1rpx对应的px值

        var percent = res.windowWidth / 750;

        that.setData({

          winHeight: res.windowHeight,

          right_titleHeight: Number(right_titleRpxHeight * percent),

          right_contentHeight: Number(right_contentRpxHeight * percent),

          left_titleHeight: Number(left_titleRpxHeight * percent)

        })

      }

    })

    // 把请求到的 list 中的数据赋值给  listChild1

    var listChild1 = list.List[0];

    // 定义一个 names ,用于存放 scroll-into-view 使用的 id

    var names = '';

    // 循环 listChild1 中的每一项

    for (var item in listChild1) {

      // 把 listChild1 中每一项的键值用“:”(便于后期处理)分隔开,存入 names 中,数据格式见图‘names中的数据’

      names = ":" item;

      // 计算右侧每一个分类的 Height 。

      // listChild1 下的每一个 item 中包含该分类的 title,所以 listChild1[item].length 需要减一

      // 右侧每一个分类中每一行放两个商品,所以 this.data.right_contentHeight 除二

      // 最后加上 right_titleHeight,此时 height 为右侧一个完整分类的高度

      var height = (listChild1[item].length - 1) * this.data.right_contentHeight / 2 this.data.right_titleHeight;

      // 同上面 names 的道理,把每一个 height 用“:”隔开放入 listHeight 中

      this.data.listHeight = ":" height;

      this.setData({

        // 把 listChild1 赋值给 list ,供 wxml 中循环使用

        list: listChild1,

        listHeight:this.data.listHeight

      })

    }

    // 把 names 的数据切成数组

    var names = names.substring(1).split(':');

    this.setData({

      names:names

    })

  },

  // 右侧滑栏的 bindscroll 事件函数(ES6写法)

  scroll(event){

    // 把 listHeight 切割成数组

    var height = this.data.listHeight.substring(1).split(':');

    // 定义一个 index 供左侧边栏联动使用

    var index = 1;

    var num = 0;

    for(var i = 0;i<height.length;i ){

      // 累计右侧滑栏滚动上去的每一个分类的 Height

        num =parseInt(height[i]);

        // 循环判断 num 是否大于右侧滑栏滚动上去的 Height ,然后 get 到 i 值赋给 index

        if (num > event.detail.scrollTop){

          index = i 1;

          // 如果右侧滑栏滚动高度小于单个类别高度的 1/2 时,index 为 0

          if (event.detail.scrollTop < height[0]/2) {

            index = 0;

          }

          break;

        }

    }

    // 定义并设置左侧边栏的滚动高度

    var left_scrollTop = this.data.left_titleHeight*index

    this.setData({

      scrollTop: left_scrollTop,

      // 动态给左侧滑栏传递对应该项的 id,用于高亮效果显示

      curNav: this.data.names[index]

    })

  },

  //点击左侧 tab ,右侧列表相应位置联动 置顶

  switchRightTab: function (e) {

    var id = e.target.id;

    this.setData({

      scrollTopId: id,

      // 左侧点击类样式

      curNav:id,

    })

  }

}) 

 

样式表 和 list 数据请翻看上一篇:《微信小程序-商品列表左=>右联动(一)》

有不懂之处,请先翻阅上一篇,如还有疑问,那肯定是笔者没写明白,还请读者不吝留言!

本文由www.bifa365365.com发布于web前端,转载请注明出处:商品列表右,微信小程序的归类页面制作

关键词: www.bifa3653