微信小程式的 swiper tab切換 寬高自適應
阿新 • • 發佈:2019-01-08
小程式 swiper標籤寬高自適應解決方法,親測有效,程式碼如下
wxml:
<view class='tabbar_view'> <view bindtap='navbarchange_func' data-current="0" class="nav {{current==0 ? 'active' : ''}}"> <text class="navtext {{current==0 ? 'active' : ''}}">個人資訊</text> </view> <view bindtap='navbarchange_func' data-current="1" class="nav {{current==1 ? 'active' : ''}}"> <text class="navtext {{current==1 ? 'active' : ''}}">競猜歷史</text> </view> <view bindtap='navbarchange_func' data-current="2" class="nav {{current==2 ? 'active' : ''}}"> <text class="navtext {{current==2 ? 'active' : ''}}">競猜結果</text> </view> </view> <swiper class='swiper' indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" indicator-active-color="#fff" indicator-color="#aaa" bindchange="swiperitemchange_func"> <!-- 個人資訊 --> <swiper-item> <scroll-view scroll-y="true"> <view class='list_item'> <view class='list_item_name_box'> <text>姓名:</text> <text>縣萍啊</text> </view> <view class='list_item_name_box'> <text class='list_item_name'>職位:</text> <text>前端</text> </view> </view> </scroll-view> </swiper-item> <!-- 競猜歷史 --> <swiper-item> <scroll-view scroll-y="true"> <view>第一期的結果------不知道</view> <view>第二期的結果------不知道</view> </scroll-view> </swiper-item> <!-- 競猜結果 --> <swiper-item> <scroll-view scroll-y="true"> <view> <text>第一名:</text> <text>aaa</text> </view> <view> <text>第二名:</text> <text>bbb</text> </view> <view> <text>第三名:</text> <text>bbb</text> </view> </scroll-view> </swiper-item> </swiper>
wxss:
.tabbar_view { border-bottom: 2rpx solid #ccc; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 25rpx; font-size: 30rpx; box-shadow: 0px 0px 4rpx 6rpx #eee; } .nav { color: #444; width: 300rpx; height: 80rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; letter-spacing: 3rpx; } .nav.active { color: #75dfab; border-bottom: 4rpx solid #75dfab; } .navtext { padding: 20rpx 0rpx; } .navtext.active { border-bottom: 5rpx solid #75dfab; } .swiper { height: 1000rpx; display: flex; margin-top: 10rpx; } swiper-item{ height: 100%; overflow:scroll; overflow-x:hidden; } scroll-view { height: 100%; }
js:
//滑動切換 swiperTab: function(e) { var that = this; that.setData({ currentTba: e.detail.current }); }, //點選切換 clickTab: function(e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }
如有不足之處,請大家指點