用uniapp写一个swiper滑动页面

1. 创建一个新的uniapp项目

2. 在pages目录下创建一个新的页面，比如叫做swiperPage

3. 在swiperPage目录下创建一个新的vue文件，比如叫做swiperPage.vue

4. 在swiperPage.vue文件中添加以下代码：

<template>
  <view class="swiper-page">
    <swiper :autoplay="true" :interval="3000" :duration="500">
      <swiper-item>
        <image src="https://picsum.photos/600/400/?image=1"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://picsum.photos/600/400/?image=2"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://picsum.photos/600/400/?image=3"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'swiper-page',
    data() {
      return {}
    }
  }
</script>

<style scoped>
  .swiper-page {
    height: 100%;
  }
  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

5. 在App.vue文件中引入swiper组件：

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  /* 全局样式 */
</style>

6. 在main.js文件中引入swiper组件并注册：

import Vue from 'vue'
import App from './App'
import uniSwiperDot from '@dcloudio/uni-ui/lib/uni-swiper-dot.vue' // 引入swiper组件
Vue.component('uni-swiper-dot', uniSwiperDot) // 注册swiper组件

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

7. 运行uniapp项目，即可看到一个自动轮播的swiper滑动页面。