ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### uniapp中swiper组件实现禁止手动滑动并且点击才滑动 > 只需要在每个swiper-item中加上 @touchmove.stop="stopTouchMove"即可实现 ```vue <swiper-item v-for="(item,index) in swiperList" :key="index" @touchmove.stop="stopTouchMove"> </swiper-item> ``` ```vue // 禁止用户手动滑动 stopTouchMove() { return true; }, ``` ### uni-app 自定义轮播图 swiper 指示点位置和样式 我们在使用`uni-app`的滑块视图容器`swiper`开发`H5前端页面`轮播图时,有时候需要对轮播图的指示点的位置和样式进行自定义。 如果不对默认的指示点位置进行移动的话,就被下面的元素所覆盖,因此此时我们必须对轮播图的指示点进行自定义。这边介绍一种最简便的方式,就是采用深度作用选择器`/deep/`来完成。具体实现方式如下: **HTML 代码:** ```vue <swiper class="banner-swiper screen-swiper square-dot" style="height: 520rpx; width:750rpx; z-index: -1; margin-top: -110rpx;" indicator-dots autoplay :interval="5000" :duration="500"> <swiper-item v-for="(item, index) in bannerList" :key="index"> <image :src="item.url" mode="aspectFill"></image> </swiper-item> </swiper> ``` **JS 代码:** ```javascript export default { data() { return { bannerList: [{ url: '/static/img/pic_banner_1.jpg' }, { url: '/static/img/pic_banner_2.jpg' }, { url: '/static/img/pic_banner_3.jpg' }] } } } ``` **SCSS 代码:** ```css .banner-swiper { /deep/ .uni-swiper-dots { // 指示点整个区域 bottom: 100rpx; } /deep/ .uni-swiper-dot { // 指示点元素默认样式 width: 12rpx!important; height: 12rpx!important; border: 1rpx solid #E0B079; } /deep/ .uni-swiper-dot-active {// 指示点元素激活(当前选中)状态样式 background: #CD9763; } } ``` 如果需要对轮播图 swiper 指示点位置和样式做更多的自定义,都可以在上面的样式中修改。如果对其自定义要求非常高,可以隐藏自带的指示点,改用`<view>`标签替代,这样还能实现跨端兼容。