WeChat小程序开发（画廊中实时监听当前页面并动态显示当前页面次序）

不出意外的，画廊效果用的都是swiper组件来实现，稍微设置和改变一下一些组件，就可以展现非常干净简单的画廊效果，可是我昨天在尝试做这个效果时遇到了一个问题，这是我们要实现的效果图：

 

 

我的问题在于。最上方那个实时加载图片的次序怎么实现？不知道其他初学者有没有和我一样的困惑，所以我带着疑惑在网上浏览了很久，也许是我询问的方式有问题，也许是我的问题实在是太简单了，总之我一开始并没有搜索到满意的答案。于是只好开始自己的硬肝道路，我一开始的想法是用bintouchstart事件来改变上方的次序。后面又尝试加上bindtouchend组合来实现，但都不理想，要补的bug越来越多，后来搜了一下竟然可以用bindchange !，然后我就尝试了一下竟然非常成功！

<view class="content_No">{{picture_no}}/{{info[0].picture.length}}</view>
<swiper bindchange="swiperChange" class="content_picture" style="height:{{swiperHeight}}" current="{{_index}}">
        <block wx:for="{{info[0].picture}}" wx:key="{{index}}">
            <swiper-item>
                <image data-id="{{index}}" mode="widthFix" class="content_image" src="{{info[0].picture[index]}}"></image>
            </swiper-item>
        </block>
    </swiper>

 

在swiper组件上加上事件bindchange，我们是通过改变变量picture_no来实现实时更新的，最后看js相应代码：

 

 swiperChange:function(e){
    console.log('bindChange_e',e)
    this.setData({
      picture_no:JSON.parse(e.detail.current)+1
    })
  },

 

这里的JSON.parse应该可以不用，这是将字符串转化为数字的接口函数。