介绍 <李> ,数据:,{
,,,标签:,(& # 39;菜单一& # 39;,,& # 39;菜单二& # 39;],//,导航菜单栏
,,,curIdx: 0,//,当前导航索引
,,,scrollHeight: 0,,//滚动高度,=,设备可视区高度,安康;,导航栏高度
,,,列表:[],//,内容区列表
,,}, ,/* *
,,*,生命周期函数——监听页面加载
,,*/onLoad才能:function (选项),{
,,,let 列表=[];
,,,for (let i=1; i<=30;我+ +){
,,,,,list.push(我)
,,,}
,,,this.setData ({
,,,,,:列表,列表
,,,});
,,}, & lt; !——,导航栏开始,——比;
& lt; view 类=皊wiper-tab"祝辞
& lt;才能view 天气:为=皗{标签}},,天气:key 类=皊wiper-tab-item {{curIdx==指数? & # 39;swiper-active& # 39;: & # 39; & # 39;}}“,数据流=皗{指数}}“,catchtap=癱lickTab"比;
,,,& lt; text>{{项}}& lt;/text>
& lt;才能/view>
& lt;/view> /*初始化样式*/看来,,文本,选择器、,输入,,按钮,图像,{
,,显示:flex;
,,box-sizing: border-box;
}/*,导航样式*/.swiper-tab {
位置:,才能相对;
,,宽度:100%;
,,身高:100 rpx;
,,justify-content:中心;
,,对齐项目:中心;
}
.swiper-tab-item {
,,背景颜色:# f3f3f3;
,,宽度:50%;
,,身高:80 rpx;
,,justify-content:中心;
,,对齐项目:中心;
}
.swiper-active {
,,背景颜色:rgb (129,, 190,, 247);
,,颜色:# fff;
} & lt; !——,内容开始,——比;
& lt; swiper 类=皊wiper_content",当前=皗{curIdx}},,,, bindchange=皊wiperTab",风格=& # 39;高度:{{scrollHeight}} px # 39;比;
& lt;才能swiper-item>
,,,& lt; scroll-view 类=皊croll-y", scroll-y 风格=& # 39;高度:{{scrollHeight}} px # 39;, bindscrolltolower=皁nReachBottom"比;
,,,& lt; view 天气:为=皗{列表}},,天气:key>
,,,,,& lt; text>,内容一{{项}}& lt;/text>
,,,& lt;/view>
,,,,,,,& lt;/scroll-view>
& lt;才能/swiper-item>
& lt;才能swiper-item>
,,,内容二
& lt;才能/swiper-item>
& lt;/swiper> ,,昂秀:,function (), {
,,,//,100为导航栏swiper-tab 的高度
,,this.setData ({
,,,,scrollHeight:, wx.getSystemInfoSync () .windowHeight 作用;(wx.getSystemInfoSync () .windowWidth /, 750, *, 100),
,,})
,,}, ,,//点击切换
,,clickTab: function (e), {
,,,this.setData ({
,,,,,curIdx: e.currentTarget.dataset.current
,,,})
,,}, ,,//滑动切换
,,swiperTab: function (e), {
,,,this.setData ({
,,,,,curIdx: e.detail.current
,,,});
,,}, ,/* *
,*页面上拉触底事件的处理函数
,*/,,onReachBottom: function (), {
,,,//,更新列的表
,,,let list =, this.data.list;
,,,console.log(列表)
null
null
null
null
null
null
null
null
null
小编给大家分享一下微信小程序中选项卡的实现方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
思路
之前写过基于偷窃者的选项卡,在小程序中有偷窃者组件,毫无疑问这里要用到偷窃者组件
<李>小程序中的偷窃者组件有个问题就是不能根据内容自适应高度,所以要通过wx.getSystemInfoSync获取设备高度设置偷窃者高度
<李>小程序中的偷窃者组件中swiper-item内容超出可视区后无法滚动显示,所以这里要用到另一个组件滚动视图。
小程序中的偷窃者组件功能还是比较有限的,有待优化。
方案
1。首先在js中设置数据
在onLoad函数中填充数据
2。在WXML中循环渲染出导航
3。设置当前活动导航样式
4。内容显示区
内容显示区使用偷窃者组件,swiper-item个数要与标签数组长度一致
<代码>小程序中的偷窃者组件有个问题就是不能根据内容自适应高度,所以要通过[天气。getSystemInfoSync][4]获取设备高度设置偷窃者高度
<代码>小程序中的偷窃者组件中swiper-item内容超出可视区后无法滚动显示,所以这里要用到另一个组件(滚动视图)[5]。
我们在昂秀函数中通过getSystemInfoSync获取设备的宽高来设置偷窃者组件高度以及滚动视图高度
