当前位置： 首页 > 资讯

微信小程序中选项卡的实现方法

发布日期： 2018-09-07 阅读量： 作者： 网络

微信小程序中选项卡的应用随处可见，本篇文章就来给大家介绍微信小程序中选项卡的实现。

思路

之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件
小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过wx.getSystemInfoSync获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件scroll-view。

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

方案

1.首先在js中设置数据

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

# 微信小程序 # javascript # swiper.js

上一篇: 函数中返回不同类型值时应该遵循哪些规则？

下一篇: wordpress怎么改字体字号

4007654355
915688610@qq.com
深圳市南山区粤海街道高新区社区高新南七道011号高新工业村T3栋

APP开发

小程序开发

物联网开发

系统开发