效果

图片

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() {},// 禁止手动竖向滑动 swipercatchTouchMove() {return false},// 跳转到新闻详情toNewsDetail(e) {const id = e.currentTarget.dataset.idwx.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;
}

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

php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...
微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
微信小程序现在依然很火,相信大家有目共睹:所以作为前端开发者,掌握如何开发小程序,是一项必备技能了,你觉得呢? 相对于PC和H5开发,小程序坑很多,所以需要慢慢"踩",被坑多了,路 ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...

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

效果

图片

WXML

JS

WXSS

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

最新文章

热门文章