最近做小程序的時(shí)候遇到了swiper高度的問(wèn)題，swiper里面的內(nèi)容可以根據(jù)數(shù)據(jù)來(lái)自適應(yīng)高度。那就給scroll-view計(jì)算一下高度
wxml

<view class="container1"><!-- tab切換 --><view class="tab"><scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"><block wx:for="{{nav}}" wx:for-index="index" wx:for-item="item" wx:key="index"><view class="nav-item {{currentTab == index ?'active':''}}" data-current="{{index}}" bindtap="switch">{{item.text}}</view></block></scroll-view></view><!-- 內(nèi)容--><swiper class="" current="{{currentTab}}" duration="300" bindchange="switchTab" style='height:{{widHeight}}'><swiper-item wx:for="{{cons}}" wx:for-item="item" wx:for-index="index" wx:key="index" class="tab"><view class="payment" style="background-image: url('../../image/lili/beijing.png');" wx:for="{{cons}}"><view class="payment_p"><text>{{item.name}}</text></view><view class="payment_a"><text>卡號(hào)：{{item.time}}</text></view><view class="payment_y"><view class="y_cons"><text>{{item.list}}</text></view></view></view></swiper-item></swiper> </view>

js中

data:{// tab切換currentTab: 0,// nav: [{text: '首頁(yè)'},{text: '我的'},{text: '發(fā)布'},{text: '職場(chǎng)'},{text: '育兒'},{text: '糾紛'},],cons: [{name: "紀(jì)念卡",time: "2018-12-04 ",list: "首頁(yè)",},{name: "張三",time: "2018-12-04 12:00",ren: "我的",},{name: "張三",time: "2018-12-04 12:00",list: "發(fā)布",},{name: "張三",time: "2018-12-04 12:00",list: "情感",},{name: "張三",time: "2018-12-04 12:00",list: "糾紛",},],height: 0,widHeight: 0,navs: 0 } // 滾動(dòng)列表switch(e) {var that = thisvar cur = e.currentTarget.dataset.current;var width = this.data.windowWidth / 5; that .setData({navs: (cur - 2) * width })if (that .data.currentTab == cur) {return false;} else {that .setData({currentTab: cur})}},switchTab(e) {var cur = e.detail.current;var width = this.data.windowWidth / 5;this.setData({currentTab: cur,navs: (cur - 2) * width });},

在onLond或者onShow中

//獲取swiper高度 var query = wx.createSelectorQuery();var that = this;var conents= this.data.cons.length;query.select('.payment').boundingClientRect(function (rect) {that.setData({height: rect.height,widHeight: rect.height * conents+ "px"})}).exec();},swiperTab: function (e) {var that = thisvar current=e.detail.currentvar heights = this.data.height;var conents= this.data.cons.lengththat.setData({currentTab: current});if (this.data.currentTab == 0) {that.setData({widHeight: heights * conents+ "px"});} },

總結(jié)

以上是生活随笔為你收集整理的微信小程序 滚动选项卡 swiper高度自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。