Fork me on GitHub

小程序轮播图实现消息通知的效果

发表于 | 分类于 | 阅读次数:

小程序轮播图实现消息通知的效果

效果很好实现，但是有些小细节，这些滚动就是轮播图，但是轮播图可以手动的进行滑动，这是不允许的，固解决让它不能触发滑动的效果，以此记录：

wxml片段如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<view class="inform">
    <swiper indicator-dots="{{inform.indicatorDots}}"
    		 autoplay="{{inform.autoplay}}"
    		 circular="{{inform.circular}}" 
    		 vertical="{{inform.vertical}}" 
    		 interval="{{inform.interval}}" 
    		 duration="{{inform.duration}}" 
    		 style="height:76rpx;">
      <block wx:for="{{inform.data}}" wx:key="index">
        <swiper-item catchtouchmove='catchTouchMove'>
          <view style="height: 76rpx;line-height: 76rpx;">
            <text>{{item.adress}}</text>
            <text class="money">{{item.money}}</text>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>

js片段如下：（重点）

1
2
3
4
5
6
7
8
9
Page({
	data: {
		//...
	},
	//通知部分禁止手动滑动
  	catchTouchMove: function (res) {
    	return false
  	}
})

加这个就禁止手动滑动，问题解决！
效果如下：
“图片描述”