微信小程序实现新闻轮播、禁止手动竖向滑动

最新推荐文章于 2023-03-13 11:14:14 发布

半度℃温热

最新推荐文章于 2023-03-13 11:14:14 发布

阅读量1.7k

点赞数 7

分类专栏：微信小程序文章标签：微信小程序小程序新闻轮播 swiper 手动滑动

本文链接：https://blog.csdn.net/fu983531588/article/details/111923683

版权

微信小程序专栏收录该内容

17 篇文章 6 订阅

订阅专栏

效果

在这里插入图片描述

图片

WXML

在 swiper-item 上加入 catchtouchmove 方法，截获竖向滑动

<view class="container">
  <view class="news">
    <image class="icon-news" src="/images/news.png"></image>
    <swiper class="swiper" autoplay circular vertical interval="3000" easing-function="easeInOutCubic">
      <swiper-item class="item"
                   wx:for="{{newsList}}"
                   wx:key="index"
                   data-id="{{item.id}}"
                   catchtouchmove="catchTouchMove" 
                   bindtap="toNewsDetail">
        <view class="txt">{{item.desc}}</view>
      </swiper-item>
    </swiper>
  </view>
</view>

JS

Page({
  data: {
  	newsList: [
      { id: 1, desc: '我是第一条新闻哦我是第一条新闻哦'},
      { id: 2, desc: '我是第二条新闻哦我是第二条新闻哦我是第二条新闻哦'},
      { id: 3, desc: '我是第三条新闻哦我是第三条新闻哦'},
      { id: 4, desc: '我是第四条新闻哦我是第四条新闻哦我是第四条新闻哦'},
      { id: 5, desc: '我是第五条新闻哦我是第五条新闻哦'},
      { id: 6, desc: '我是第六条新闻哦'}
    ]
  },
  onLoad(options) {
    
  },
  onShow() {

  },
  // 禁止手动竖向滑动 swiper
  catchTouchMove() {
    return false
  },
  // 跳转到新闻详情
  toNewsDetail(e) {
    const id = e.currentTarget.dataset.id
    wx.showToast({
      title: '第'+id+'条新闻',
      icon: 'none',
      duration: 1600
    })
  }
})

WXSS

page {
  background: #fff;
}
.container {
  width: 100%;
}
.news {
  width: 100%;
  padding: 18rpx 30rpx;
  box-sizing: border-box;
  display: flex;
}
.news .icon-news {
  flex: 0 0 44rpx;
  height: 44rpx;
  padding-right: 12rpx;
  border-right: 2rpx solid #ebebeb;
  margin-right: 12rpx;
}
.news .swiper {
  flex: 1;
  height: 40rpx;
}
.news .swiper .item {
  font-size: 26rpx;
  display: flex;
  align-items: center;
}
.news .swiper .item .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}