uniapp轮播带查看大图效果demo示例、带数字的轮播（整理）

<template>
  <view class='home'>
    <swiper indicator-dots circular autoplay interval=2000 indicator-active-color="#4281EA"
      indicator-color="rgba(204,204,204,1)">
      <swiper-item v-for="(item,index) in swipers" :key="index" class="swiperBox">
        <image :src="item" class="img" @click="preViewImg(item)"></image>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        swipers: [
          // 'https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
          "https://app-file.beitaichufang.com/img/H5/web/banner/banner21.jpg",
          "https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg",
          "https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg"
        ],
      }
    },
    onLoad() {
    },
    methods:{
      preViewImg(imgSrc) {
        uni.previewImage({
          current: imgSrc,
          urls: this.swipers //需要预览的图片链接列表  
        })
      },
    }
  }
</script>
<style lang="scss">
  .home{
    swiper{
      width: 750rpx;
    }
    image{
      width: 100%;
      height: 100%;
    }
  }
</style>

<template>
  <view class="goodsDetailsBox">
    <!-- 轮播 -->
    <view class="carouselBox">
      <view class="swiper">
        <swiper :interval="2000" :duration="1000" :indicator-dots="false" :current="topSwiperIndex"
          @change="topSwiperTab">
          <swiper-item v-for="(item,index) in topSwiper" :key="index">
            <view class="swiper-item">
              <image :src="item" mode="aspectFill" @click="preViewImg(item)"></image>
            </view>
          </swiper-item>
        </swiper>
        <!-- 自定义指示点-数字 -->
        <view class="digit font-size24 color">
          <text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        topSwiperIndex: 0,
        topSwiper: ['../static/home/l1.jpg','../static/home/l2.jpg','../static/home/l3.jpg']
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 页面加载
    onLoad(e) {
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      // 滑动轮播获取数量
      topSwiperTab(e) {
        var that = this;
        this.topSwiperIndex = Number(e.target.current);
      },
      // 点击预览大图
      preViewImg(imgSrc) {
        uni.previewImage({
          current: imgSrc,
          urls: this.topSwiper //需要预览的图片链接列表  
        })
      },
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetailsBox {
    width: 100%;
    height: 100%;
    background: #F6F6F6;
    .carouselBox {
      width: 100%;
      height: 750rpx;
      // background-color: rosybrown;
      .swiper{
        position: relative;
        swiper {
          width: 100%;
          height: 750rpx;
          swiper-item {
            image {
              width: 100%;
              height: 750rpx;
              display: block;
            }
          }
        }
        .digit{
          position: absolute;
          right: 30rpx;
          bottom: 20rpx;
          width: 81rpx;
          height: 44rpx;
          line-height: 44rpx;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 22rpx;
          text-align: center;
        }
      }
    }
  }
</style>