滚动条

scroll-view可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。

<!-- wxml -->
<!-- 横 -->
<scroll-view scroll-x="true" style="width: 100%;height:10vh; white-space: nowrap; ">
  <view class="x {{index===indexX?'blue':''}}" wx:for="{{15}}" wx:key="i" 
  data-index="{{index}}" bindtap="hitX">
    sad{{index}}
  </view>
</scroll-view>
<!-- 竖 -->
<scroll-view scroll-y="true" style="height: 90vh;width: 100px;">
  <view class="y {{index===indexY?'green':''}}" wx:for="{{20}}" wx:key="i" 
  data-index="{{index}}" bindtap="hitY">
  happy{{index}}</view>
</scroll-view>

/* wxss */
.y {
  line-height: 40px;
  background-color: darkseagreen;
  text-align: center;
  border-bottom: 1px solid green;
}

.x {
  line-height: 10vh;
  background-color: lightblue;
  width: 80px;
  display: inline-block;
  border-right: 1px solid blue;
  text-align: center;
}

.blue {
  background-color: blue;
  color: white;
}

.green {
  background-color: green;
  color: white;
}

  //js
  data: {
    indexX: '',
    indexY: ''
  },
  hitX: function (e) {
    let { target: { dataset: { index } } } = e;
    this.setData({
      indexX: index
    })
  },
  hitY: function (e) {
    let { target: { dataset: { index } } } = e;
    this.setData({
      indexY: index
    })
  }
复制代码

swiper

swiper滑块视图容器。其中只可放置swiper-item组件。

<!-- wxml -->
<view>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" 
  interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgs}}" wx:key="*this">
      <swiper-item>
        <image src="{{item}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

<view>
  <view>指示点</view>
  <view>
    <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
  </view>
</view>

<view>
  <view>自动播放</view>
  <view>
    <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
  </view>
</view>

<view>
  <text>幻灯片切换时长(ms)</text>
  <text>{{duration}}</text>
</view>
<slider bindchange="durationChange" value="{{duration}}" min="500" max="2000" />

<view>
  <text>自动播放间隔时长(ms)</text>
  <text>{{interval}}</text>
</view>
<slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" />

  //js
  data: {
    imgs: ['https://img1.baidu.com/it/u=2265612387,2174838528&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=377', 
    'https://img0.baidu.com/it/u=1603129314,2979206102&fm=253&fmt=auto&app=120&f=JPEG?w=658&h=411',
    'https://img1.baidu.com/it/u=1904712644,3883887249&fm=253&fmt=auto&app=138&f=JPEG?w=668&h=500'],
    indicatorDots: false,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
  },
  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  },