uni-app 引导页制作

引导页要求：

四张图片，切换到最后一张，点击跳转到登录页面

1. 使用uni的扩展组件

组件名：uni-swiper-dot, 该组件依赖 swiper 组件,请与swiper组件配合使用

uni-swiper-dot 属性的解释

• mode ：指示点的类型，可选值：default 、round 、nav 、 indexes

• info: 轮播图的数据，通过数组长度决定指示点个数

• current ： 当前指示点索引，必须是通过 swiper 的 change 事件获取到的 e.detail.current

• dots-styles：指示器的样式

swiper 属性的解释

• circular 是否采用衔接滑动，即播放到末尾后重新回到开头

• current 当前所在滑块的 下标

• change current 改变时会触发 change 事件，event.detail.current 可以获取下标

<view class="guide-swiper">
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="imageArr"
      :current="current"
      :mode="mode"
      :dots-styles="dotsStyles"
      field="content"
    >
      <swiper
        class="swiper"
        :circular="false"
        current="swiperDotIndex"
        @change="getCurrentIndex"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in imageArr"
          :key="item.id"
        >
          <image
            class="guider-pics"
            :src="`${item.path}`"
            mode="widthFix"
          ></image>
          <button
            class="button-img"
            @click="jumpLogin"
            v-if="index == imageArr.length - 1"
          >
            立即体验
          </button>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>

<script>
export default {
  name: 'guide-swiper',
  props: ['imageArr', 'mode'],
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      dotsStyles: {
        width: '10', // 指示器小圆点的宽度
        bottom: '60', // 指示器距离底部的高度
        backgroundColor: 'rgba(255, 255, 255, 0.3)', // 指示点背景颜色
        border: '1px rgba(0, 0, 0, .3) solid', // 边框样式
        color: '#fff', // 指示点前景色
        selectedBackgroundColor: 'rgba(255, 255, 255, 0.9)', // 已选择指示点背景色
        selectedBorder: '1px rgba(255, 255, 255, 0.9) solid', // 已选择指示点边框样式
      },
    }
  },
  methods: {
    clickItem(e) {
      this.swiperDotIndex = e
    },
    getCurrentIndex(e) {
      this.current = e.detail.current
    },
    jumpLogin() {
      console.log('点击了按钮')
      uni.redirectTo({
        url: '/pages/login/login',
      })
    },
  },
}
</script>