Let’s go straight to the code:

WXML code:

<view class="container"> <view class="header"> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0? </view> <view class="swiper-tab-item {{currentTab==1? </view> </view> </view> <swiper class="swipermenu" current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item> <view class="swiper-menu-item" wx:for="{{doorplatepicture_data}}" wx:key="index"> <view class="content"> <view class="swiperImg"><image class="picture"  src=""></image></view> <view class="swiperText"> <view class="text1">{{item.content}}</view> <view class="text2"> <view Class ="fl"> {{item.name}}</view> <view class="fr">{{item.date}}</view> </view> </view> </view> </view> </swiper-item> <swiper-item> Content 2 </swiper-item> </swiper> </view>Copy the code

WXSS code:

.container{ display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: space-between; } .fl{ float: left; } .fr{ float: right; } .header{ width:100%; padding: 36rpx 0 24rpx 0; } .swiper-tab{ width: 686rpx; margin: 0 auto; text-align: center; height: 88rpx; line-height: 88rpx; font-size: 34rpx; display: flex; flex-flow: row; justify-content: space-between; background-color: #EEF4FE; border-radius: 8rpx; } .swiper-tab .swiper-tab-item{ width: 50%; color: #999999; } .active{ color:#ffffff ! important; font-weight: bold; border-radius: 8rpx; background-color: #5497FA; } .swipermenu{ width: 100%; height: 1000rpx; display: flex; } .swipermenu .swiper-menu-item{ width: 100%; height: 160rpx; } .swipermenu .swiper-menu-item .content{ width: 686rpx; height: 100%; margin: 0 auto; } .swipermenu .swiper-menu-item .content .swiperImg{ height: 160rpx; width: 172rpx; padding: 24rpx 0; box-sizing: border-box; float: left; margin-right: 29rpx; } .swipermenu .swiper-menu-item .content .swiperImg .picture{ height: 100%; width: 100%; border-radius: 4rpx; background-color: #999999; } .swipermenu .swiper-menu-item .content .swiperText{ width: 485rpx; height: 100%; float: left; padding: 24rpx 0; box-sizing: border-box; border-bottom: 1rpx solid #E1E6EC; } .swipermenu .swiper-menu-item .swiperText .text1{ font-size: 28rpx; The line - height: 31.5 the RPX; } .swipermenu .swiper-menu-item .swiperText .text2{ font-size: 22rpx; line-height: 22rpx; margin-top: 19rpx; color: #999999; }Copy the code

Js code:

Page({ data: {currentTab:0, doorPlatepicture_data :[{imgUrl:"", Content :"", name:" zhang Three ", date:"2020-10-13 12:12: 1 "},{imgUrl:"", content:" 1512 Jiankang Road, Huadong Village ", Name :" Zhang SAN ", Date :"2020-10-13 12:12: 1 "},{imgUrl:"", content:" 1512 Jiankang Road, Huadong Village ", Name :" Zhang SAN ", Date :"2020-10-13 12:12: 1 "},{imgUrl:"", content:" 1512 Jiankang Road, Huadong Village ", Name :" Zhang SAN ", Date :"2020-10-13 12:12: 1 "},{imgUrl:"", content:" ", date:"2020-10-13 12:12:12 "}]}, // swiperTab: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, // clickTab: function(e){var that = this; if(that.data.currentTab === e.target.dataset.current){ return false; }else{ that.setData({ currentTab:e.target.dataset.current }) } }, })Copy the code

Note:

The default height of the swiper widget is 150px. If there is too much content in the swiper widget, the content will be covered.

Solutions:

If the number of data items in swiper is fixed and the height of each data item is consistent, the specific height can be calculated. Set the swiper height to this value. If the number of data items in swiper is not fixed but each data item is of the same height, swiper height = Number of items x height of each item. If the number of data items is not fixed and the height of each data item is inconsistent, you can use scroll view to dynamically calculate the height.