### 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>`標簽替代，這樣還能實現跨端兼容。