WeChat 미니 프로그램의 탭 적용은 어디에서나 볼 수 있습니다. 이 기사에서는 WeChat 미니 프로그램의 탭 구현을 소개합니다.
이전에 swiper를 기반으로 탭을 작성한 적이 있습니다. 미니 프로그램에 swiper 구성 요소가 있는데 여기서는 swiper 구성 요소가 사용된다는 것은 의심의 여지가 없습니다
swiper에 문제가 있습니다. 콘텐츠는 높이에 적응하므로 wx.getSystemInfoSync를 통해 장치 높이를 가져와서 스위퍼 높이를 설정해야 합니다. 시각적 영역을 초과한 후에는 스크롤되므로 여기서는 또 다른 구성 요소 스크롤이 사용됩니다.
솔루션1. 먼저 js
data: { tabs: ['菜单一', '菜单二'],// 导航菜单栏 curIdx:0,// 当前导航索引 scrollHeight:0, //滚动高度 = 设备可视区高度 - 导航栏高度 list:[],// 内容区列表 },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let list=[]; for (let i=1;i<=30;i++){ list.push(i) } this.setData({ list: list }); },
<!-- 导航栏开始 --> <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에서 루프의 탐색을 렌더링하세요.
4. 콘텐츠 표시 영역콘텐츠 표시 영역은 swiper 항목 수는 탭 배열의 길이와 일치해야 합니다./*初始化样式*/ 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; }
애플릿의 swiper 구성 요소에 문제가 있습니다. 콘텐츠에 따라 높이를 조정할 수 없으므로 [ wx.getSystemInfoSync][4] 장치 높이 가져오기 및 스와이프 높이 설정
애플릿이 시각적 영역을 초과하면 스크롤할 수 없으므로 여기서는 다른 구성 요소를 사용합니다[scroll-view][5].
<!-- 内容开始 --> <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>
onShow: function () { // 100为导航栏swiper-tab 的高度 this.setData({ scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100), }) },
小程序中的swiper组件有个问题就是不能根据内容自适应高度,所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示,所以这里要用到另一个组件[scroll-view][5]。
6. 내비게이션 바 전환을 위한 콘텐츠//点击切换 clickTab: function (e) { this.setData({ curIdx: e.currentTarget.dataset.current }) },
//滑动切换 swiperTab: function (e) { this.setData({ curIdx: e.detail.current }); },
위 내용은 WeChat 미니 프로그램에서 탭을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!