<!--pages/tt/tt.wxml-->
<view class="tab">
<block wx:for="{{items}}" wx:key="index">
<view class="tab-item {{ index== tabCurrent ? 'active' : '' }}" data-index="{{index}}" bindtap="handleTap">
<text>{{item}}</text>
</view>
</block>
</view>
<swiper bindchange="handleSwiper" class="swiper" current="{{tabCurrent}}">
<block wx:for="{{banners}}" wx:key="index">
<swiper-item>
<view class="waterfall">
<view>
2
</view>
</view>
</swiper-item>
</block>
</swiper>
// pages/tt/tt.js
import {tt} from '../../request/tt.js'
Page({
/**
* 页面的初始数据
*/
data: {
items:['关注','发现','本地'],
tabCurrent:0,
banners:['1','2','3']
},
handleTap(event) {
console.log(event)
console.log(event.currentTarget.dataset.index)
this.setData({
tabCurrent: event.currentTarget.dataset.index
});
},
handleSwiper(event){
console.log(event)
this.setData({
tabCurrent: event.detail.current
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
tt().then(res=>{
console.log(res)
}).catch(err=>{
console.log(res)
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/tt/tt.wxss */
.tab {
display: flex;
margin-bottom: 16rpx;
position: fixed;
width: 100%;
top: 0;
}
.tab .tab-item{
flex: 1;
text-align: center;
}
.tab-item.active text{
color: red;
padding: 8rpx;
border-bottom: 2px solid red;
}
.swiper {
background: green;
position: relative;
top: 60rpx;
}
.waterfall {
display: flex;
justify-content: space-between;
padding: 0 2%;
flex-wrap: wrap;
padding-top: 2%;
}
.waterfall view{
width:49%;
margin-bottom: 2%;
background: #fff;
}
