全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[南宁seo公司找久澳]微信小程序中选项卡的实现方法

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

  

思路

  •  

      之前写过基于swiper的选项卡▽▼-,在小程序中有swiper组件○▼◇◁,毫无疑问这里要用到swiper组件

      

  •  

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

      

  •  

      小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示,[南宁seo公司找久澳]所以这里要用到另一个组件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中循环渲染出导航

<!-- 导航栏开始 -->●-;
<view class="◁◁▪★;swiper-tab">
 <▷◆▪◁;view wx○▪◁•:for="▪•;{{tabs}}"△▽; wx:key class="■=▷◆;swiper-tab-item {{curIdx==index?'swiper-active':'▽•●;'}}" data-current="{{index}}" catchtap="▲•=;clickTab">-◆;
 <▲△••;text>{{item}}</text>
 </view>
</view>△△=◇;

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数组长度 一致

  

<!-- 内容开始 -->◆▽•;
<swiper class="swiper_content"□△; current="▼=▲;{{curIdx}}"◇◆; bindchange="=□◇◇;swiperTab"◇◆▲★; style='height:{{scrollHeight}}px'▽◇△-;>
 <-△;swiper-item>
 <scroll-view class="scroll-y"=▼•; scroll-y style='height…▽★•:{{scrollHeight}}px' bindscrolltolower="☆=;onReachBottom">=▽;
 <view wx:for="{{list}}"•◁◇▽; wx…▲▲:key>
 <-●•▪;text> 内容一{{item}}</text>
 </view>▼…;
 </scroll-view>
 </swiper-item>
 <swiper-item>
 内容二
 <☆-▲★;/swiper-item>▷△○=;
<☆☆▪;/swiper>◁=▽;

 

  小程序中的swiper组件有个问题就是不能根据内容自适应高度◇=▲•,芜湖市小程序开发哪家好所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示-=,C#.Net教程,所以这里要用到另一个组件[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
 })◇•;

 }▷▲◁,

 

  一个漂亮的选项卡就完成了◇●。完整案例

  以上就是本篇文章的全部内容了,更多精彩请关注久澳传媒编程栏目。

  以上就是微信小程序中选项卡的实现方法的详细内容,库尔勒市小程序开发哪家好更多请关注久澳传媒编程栏目其它相关文章!

[南宁seo公司找久澳]微信小程序中选项卡的实现方法

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。