How to use swiper component in WeChat applet-JS Tutorial-php.cn

How to use swiper component in WeChat applet

亚连

Release： 2018-06-22 11:57:58

Original

3671 people have browsed it

This article mainly introduces the usage of the swiper component in the WeChat applet, and analyzes the functions and usage of the swiper component in the WeChat applet in the form of examples. It also comes with the complete source code for readers to download and refer to. Friends who need it can refer to it

The example in this article describes the usage of the swiper component of the WeChat applet. Share it with everyone for your reference, the details are as follows:

For details about the view container swiper, please refer to the official documentation

Let’s take a look at the running effect first:

index.js：

Page({
 data: {
  imgUrls: [&#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
&#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
&#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
  ],
  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
  })
 }
})

Copy after login

index.wxml：

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" ></image>
      <text class="textindex">{{index}}</text>
    </swiper-item>
  </block>  
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots ({{indicatorDots}})</button>
<button bindtap="changeAutoplay"> autoplay ({{autoplay}})</button>
<slider bindchange="intervalChange" show-value min="2000" max="5000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="2000"/> duration

Copy after login

index.wxss：

.slide-image{  
  display: inline;
}
.textindex{
  position: absolute;
  top :20px;
  color: red;
}

Copy after login

The above is what I compiled for everyone. I hope it will be useful to you in the future. Everyone is helpful.

How to use the Vue.use() component through the global method

About creating constants in JavaScript (detailed tutorial )

How to close the web page and display the exit prompt in js (detailed tutorial)

In the JavaScript statement, there are issues related to the following semicolon

The above is the detailed content of How to use swiper component in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!