上次已经实现了小程序tab切换了,可是到后来想实现绑定数据切换,折腾了我两天,翻了好多资料,终于搞出来了,实在是太不容易了,可能是本人功夫不到家吧,哈哈,不多说了直接上代码,能看得懂的拿去用。
swiper做tab切换的时候current必须是容0.1.2.3开始,current默认是0,当初走了弯路,直接用分类的ID作为index的值。
上次没做滑动测试就直接放上去了,后来我又测试好久,这次把滑动tab获取分类id放上去
wxml前端代码:
<view class='swiper-tab'>
<view class="weui-navbar" style="position:fixed;background:#fff">
<block wx:for="{{tabName}}" wx:key="typeId">
<view class="swiper-tab-item {{currentTab == index?'active':''}}" data-current="{{index}}" data-type-id="{{item.id}}" bindtap="clickTab">{{item.name}}</view>
</block>
</view>
</view>
<swiper current='{{currentTab}}' duration='300' bindchange='swiperTab'>
<block wx:for="{{tabName}}">
<swiper-item>
<navigator url='../info/info?id={{data.id}}' wx:for="{{typeList}}" wx:for-item="data">
<view class='newstype-item'>
<image src='{{data.litpic}}' class='pic' mode='aspectFill'></image>
<view class='newstype-item-right'>
<text class='newstype-item-maintext'>{{data.title}}</text>
<view class='newstype-item-bottom'>
<text class='newstype-item-smalltext'>{{data.time}}</text>
<view class='newstype-item-bottom-right'>
<image src="/images/icon_look.png" style="width:34rpx;height:34rpx"></image>
<view class='newstype-item-smalltext' style="margin-left:10rpx; font-size: 20rpx; margin-bottom:1rpx">{{data.click}}</view>
</view>
</view>
</view>
</view>
</navigator>
</swiper-item>
</block>
</swiper>
js后端代码:
var app = getApp();
var url = app.d.ceshiUrl + 'category';
var listUrl = app.d.ceshiUrl + 'catList';
var page = 1;
var page_size = 6;
Page({
/**
* 页面的初始数据
*/
data: {
//tabName: ['中医药膳', '中医方剂', '中医养生', '中医常识'],
currentTab: 0,
typeList: []
},
//滑动切换
swiperTab: function(e) {
//console.log(e.detail.current)
//console.log(this.data.tabName[e.detail.current].id)
var that = this
var current = e.detail.current
var typeid = that.data.tabName[current].id //获取当前分类id
//console.log(typeid)
this.setData({
currentTab: e.detail.current
})
wx.request({
url: listUrl,
method: 'post',
data: {
cat_id: typeid,
page: page,
page_size: page_size
},
header: {
"Content-Type": "application/json"
},
success: function (res) {
//console.log(res);
if (res.data.status === 1) {
that.setData({
typeList: res.data.list
})
}
}
})
},
//点击切换
clickTab: function(e) {
var that = this;
console.log(e)
const currentTab = e.target.dataset.current;
const typeid = e.target.dataset.typeId;
if (that.data.current === currentTab) {
return false;
} else {
that.setData({
currentTab: currentTab
})
console.log(currentTab);
wx.request({
url: listUrl,
method: 'post',
data: {
cat_id: typeid,
page: page,
page_size: page_size
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
console.log(res);
if (res.data.status === 1) {
that.setData({
typeList: res.data.list
})
}
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this
wx.getSystemInfo({
success: function(res) {
that.setData({
swiperHeight: res.windowHeight
})
},
})
wx.request({
url: url,
method: 'post',
data: {
page: page,
page_size: page_size
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
console.log(res)
if (res.data.status === 1) {
that.setData({
tabName: res.data.category,
typeList: res.data.list
})
} else {
wx.showToast({
title: res.data.error,
duration: 2000
})
}
that.setData({
currentTab: 0
})
},
fail: function() {
wx.showToast({
title: '网络异常',
duration: 2000
})
}
})
},
})
wxss代码:
.swiper-tab {
width: 100%;
background-color: #fff;
border-bottom: 2rpx solid #ccc;
text-align: center;
height: 80rpx;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.swiper-tab-item {
width: 30%;
color: #434343;
line-height: 80rpx;
font-size:28rpx;
}
.active {
color: #f65959;
border-bottom: 5rpx solid #f96060;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
swiper {
background: #fff;
height: 700px;
padding: 10rpx 0rpx;
margin-bottom: 20px;
}
内容里面的wxss代码请翻看我之前发布的tab切换博文,后端API我就不写了,转载请注明作者。