微信小程序swiper滑动切换,怎么在滑动的时候获取自定义的值呢?

it0_soft 2018-11-03 09:43:11
我坐了一个小程序分类切换显示不同的内容,点击tab切换可以切换不同的内容,但是滑动swiper来回都是默认第一个分类的内容,获取不到自定义分类ID,简直就是无解了。下面我上代码:
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,哪位知道怎么在滑动的时候获取这些分类的数值呢?
...全文
1348 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
it0_soft 2018-11-06
  • 打赏
  • 举报
回复
引用 2 楼 qq_41114603 的回复:

<navigator id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{typeList}}" wx:for-item="data">
这里循环赋值,id都是一样的吧;还是改成data-id好点; 你是要取当前分类的id的话应该是

data: {
    tabName: [{
                          id:3,
                          type:'中医药膳'
                     },{
                          id:4,
                          type:' '中医方剂'
                     },{
                          id:7,
                          type:'中医养生'
                     },{
                          id:8,
                          type:'中医常识'
                     }],
    currentTab: 0,
    typeList: [],
    hasMoreData: true,
    bottomTitle: false
  },
  //滑动切换
  swiperTab: function(e) {
    console.log(e)
    this.setData({
      currentTab: e.detail.current
    })
  },
这样的话 this.data.tabName[this.data.currentTab].id就是当前的分类id;
谢谢你了,按照你的方法已经搞定了,太感谢了!
風灬雲 2018-11-05
  • 打赏
  • 举报
回复

<navigator id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{typeList}}" wx:for-item="data">

这里循环赋值,id都是一样的吧;还是改成data-id好点;
你是要取当前分类的id的话应该是

data: {
tabName: [{
id:3,
type:'中医药膳'
},{
id:4,
type:' '中医方剂'
},{
id:7,
type:'中医养生'
},{
id:8,
type:'中医常识'
}],
currentTab: 0,
typeList: [],
hasMoreData: true,
bottomTitle: false
},
//滑动切换
swiperTab: function(e) {
console.log(e)
this.setData({
currentTab: e.detail.current
})
},

这样的话 this.data.tabName[this.data.currentTab].id就是当前的分类id;
it0_soft 2018-11-05
  • 打赏
  • 举报
回复
怎么没人呢?

3,156

社区成员

发帖
与我相关
我的任务
社区描述
微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,通过二次开发可以将公众账号由一个媒体型营销工具转化成提供服务的产品。
社区管理员
  • 微信开发
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧