小程序 全屏滑动【亲测有效】

网上很多文章的全屏滚动，看的眼花缭乱，web的还好，找到一个，删删减减瘦身了很多；小程序的弄了两个，亲测了一下，BUG有很多，很不完美；

在官方文档里找了一下，看到这个有点像 Swiper ，最后就是亲自操刀了，还不错，完美，可塑性很大！

（这个是按钮版的图，在vip文章里）

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    indicatorDots: true, //面板指示点
    vertical: true, //是否纵向
    autoplay: false, //是否自动切换
    interval: 2000, //切换时间间隔
    duration: 500  //滑动动画时长
  },
})

wxml:

<view class="page-body">
  <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block>
      <swiper-item>
        <view class="swiper-item demo-text-1"></view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item demo-text-2"></view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item demo-text-3"></view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item demo-text-4"></view>
      </swiper-item>
    </block>
  </swiper>
</view>

wxss:

.page-body{padding: 0;margin:0;}
swiper{height:100vh;}
.swiper-item{height:100vh;}
.demo-text-1{background-color:rgb(228, 95, 18)}
.demo-text-2{background-color:rgb(28, 207, 28);}
.demo-text-3{background-color:rgb(83, 83, 206);}
.demo-text-4{background-color:rgb(221, 42, 147);}

很简洁，没错吧！web 版的，有时间记得先！

想要怎么样的，就在js文件更改一下 true 或 false ，是否显示那几个面板点，是否纵向切换，是否自动切换等等，可以去找文档操刀