微信小程序之选项卡

stormjun 发布于2019-08-23 11:49 / 3543人阅读

摘要：我们在函数中通过获取设备的宽高来设置组件高度以及高度为导航栏的高度点击导航栏切换内容点击切换滑动内容切换导航栏滑动切换可滚动区域滚动最底刷新数据页面上拉触底事件的处理函数更新列表一个漂亮的选项卡就完成了完整案例

选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡

思路

之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件

小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过wx.getSystemInfoSync获取设备高度设置swiper高度

小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件scroll-view。

小程序中的swiper组件功能还是比较有限的，有待优化。

方案 1.首先在js中设置数据

</>复制代码 
 data: {
    tabs: ["菜单一", "菜单二"],// 导航菜单栏
    curIdx:0,// 当前导航索引
    scrollHeight:0, //滚动高度 = 设备可视区高度 -  导航栏高度
    list:[],// 内容区列表
  },

在onLoad函数中填充数据

</>复制代码 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list=[];
    for (let i=1;i<=30;i++){
      list.push(i)
    }
    this.setData({
      list: list
    });
  },

2.在WXML中循环渲染出导航

</>复制代码 
  
    {{item}}

3.设置当前活动导航样式

</>复制代码 
/*初始化样式*/
view, text, picker, input, button, image{
  display: flex;
  box-sizing: border-box;
}
/* 导航样式*/
.swiper-tab {
  position: relative;
  width: 100%;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}
.swiper-tab-item {
  background-color: #f3f3f3;
  width: 50%;
  height: 80rpx;
  justify-content: center;
  align-items: center;
}
.swiper-active{
  background-color: rgb(129, 190, 247);
  color: #fff;
}

4.内容显示区

内容显示区使用swiper组件，swiper-item个数要与tabs数组长度一致

</>复制代码 
  
    
    
       内容一{{item}}
    
        
  
  
    内容二

小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件[scroll-view][5]。
我们在onShow函数中通过getSystemInfoSync获取设备的宽高来设置swiper组件高度以及scroll-view高度

</>复制代码 
  onShow: function () {
    // 100为导航栏swiper-tab 的高度
   this.setData({
     scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
   })
  },

5.点击导航栏切换内容

</>复制代码 
  //点击切换
  clickTab: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },

6.滑动内容切换导航栏

</>复制代码 
  //滑动切换
  swiperTab: function (e) {
    this.setData({
      curIdx: e.detail.current
    });
  },

7.可滚动区域滚动最底刷新数据

</>复制代码 
  /**
 * 页面上拉触底事件的处理函数
 */
  onReachBottom: function () {
    // 更新列表
    let list = this.data.list;
    console.log(list)
    let lens = list.length
    for (let i = lens; i < lens+30; i++) {
      list.push(i)
    }
    this.setData({
      list: list
    });
  
  },

一个漂亮的选项卡就完成了

完整案例

GPU云服务器云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97525.html

微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

he_xd 2019-08-02 12:03 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

PascalXie 2019-08-29 17:19 评论0 收藏0
微信小程序 bug 集中营

摘要：利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。但是第一，微信小程序是国内的，有中文文档，虽然它的文档说明有点坑，但好歹有文档，阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们，如果觉得本文还不错，记得给个...

lordharrd 2019-08-26 13:21 评论0 收藏0
hello-weapp微信小程序最简示例教程

摘要：仓库打开微信小程序官方开发文档，最好全篇看一遍，基本上就会了。 https://github.com/dingyiming... 仓库：https://github.com/dingyiming... 打开微信小程序官方开发文档，最好全篇看一遍，基本上就会了。点击文档中工具选项卡中下载工具页面下载对应系统版本的微信开发者工具注意：脱离微信开发者工具是不能调试的好...

Labradors 2019-08-21 14:30 评论0 收藏0