微信小程序swiper滑动切换,怎么在滑动的时候获取自定义的值呢?
我坐了一个小程序分类切换显示不同的内容,点击tab切换可以切换不同的内容,但是滑动swiper来回都是默认第一个分类的内容,获取不到自定义分类ID,简直就是无解了。下面我上代码:
wxml渲染代码:
后端js代码:
这里我API获取的tabName如上js代码所示,id分别为3.4.7.8,哪位知道怎么在滑动的时候获取这些分类的数值呢?
wxml渲染代码:
<view class='swiper-tab'>
<view class="weui-navbar" style="position:fixed;background:#fff">
<block wx:for="{{tabName}}">
<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' style='height:{{winHeight}}rpx' bindchange='swiperTab'>
<block wx:for="{{tabName}}">
<swiper-item>
<navigator id="{{item.id}}" 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>
<view class="weui-loadmore" hidden="{{!hasMoreData}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class='data-bottom' hidden='{{!bottomTitle}}'>{{title}}</view>后端js代码:
data: {
//tabName: ['中医药膳', '中医方剂', '中医养生', '中医常识'],
currentTab: 0,
typeList: [],
hasMoreData: true,
bottomTitle: false
},
//滑动切换
swiperTab: function(e) {
console.log(e)
this.setData({
currentTab: e.detail.current
})
},这里我API获取的tabName如上js代码所示,id分别为3.4.7.8,哪位知道怎么在滑动的时候获取这些分类的数值呢?
...全文
相关推荐
微信小程序 轮播图swiper详解及实例(源码下载)
主要介绍了微信小程序 轮播图swiper详解及实例(源码下载)的相关资料,实用小技巧自定义轮播图swiper dots默认样式,需要的朋友可以参考下
微信小程序自定义轮播图
主要为大家详细介绍了微信小程序自定义轮播图,swiper dots默认样式修改,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序swiper实现滑动放大缩小效果
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序使用swiper组件实现层叠轮播图
主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序实现Swiper轮播图效果
主要介绍了微信小程序实现Swiper轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


