<swiper class="view-item" indicator-dots="true" autoplay="true">
<swiper-item class="bg-green">
<view >Content</view>
</swiper-item>
<swiper-item class="bg-yellow">
<view >Content</view>
</swiper-item>
<swiper-item class="bg-blue">
<view >Content</view>
</swiper-item>
</swiper>

<swpier indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for-items="{{imgUrls}}">
  <swpier-item>
   <image src="/UploadFiles/2021-04-02/{{item}}">

index.js


Page({
 data: {
  imgUrls: [
   'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
   'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
   'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  ],
  indicatorDots: false,
  autoplay: false,
  interval: 5000,
  duration: 1000
 },
 changeIndicatorDots: function(e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 changeAutoplay: function(e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 intervalChange: function(e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durationChange: function(e) {
  this.setData({
   duration: e.detail.value
  })
 }
})




其实，你应该也发现了，微信小程序的index.wxml和index.wxss文件很好理解并且很好上手，难点就在于index.js和index.json的理解，也就是对程序逻辑的处理。
希望本文所述对大家微信小程序设计有所帮助。