Home > Web Front-end > JS Tutorial > body text

How to use gallery slider component in WeChat mini program

亚连
Release: 2018-06-08 16:05:40
Original
2554 people have browsed it

This article mainly introduces in detail how to use the WeChat applet picture carousel component gallery slider. It has a certain reference value. Interested friends can refer to it.

The examples in this article are for everyone. The specific code of the WeChat applet image carousel component is shared for your reference. The specific content is as follows

First the rendering:

How to use gallery slider component in WeChat mini program

wxml

<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore">
 <view class="swiper">
  <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
      indicator-color="#fff" indicator-active-color="red">
    <block wx:for-items="{{banner_url}}" wx:key="item.id">
      <navigator url="../blogList/blogList">
       <swiper-item>
        <block wx:if="{{item}}">
         <image class="imgw" src="{{item.url}}" mode="aspectFill"/>
        </block>
        <block wx:else>
         <image src="../../images/default_pic.png" mode="aspectFill"></image>
        </block>
       </swiper-item>
      </navigator>
    </block>
  </swiper>
 </view>
</scroll-view>
Copy after login

wxss

.imgw{width:100%;}
Copy after login

js

/**
 *页面的初始数据
 */
data: {
 banner_url: data.bannerList(),
 open: false,
 indicatorDots: true,//是否显示面板指示点
 autoplay: true,//是否开启自动切换
 interval: 3000,//自动切换时间间隔
 duration: 500//滑动动画时长
}
Copy after login

Final effect:

How to use gallery slider component in WeChat mini program

##Summary:

1. The function of the scroll-view component is to trigger touch sliding

2. The function of the swiper component is to automatically switch images to form a carousel
3. The function of the navigator component is to add links to each image
Mainly scroll-view and swiper components are made into sliding carousel components.

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

Related articles:

Basic internal method diagram of Object in JavaScript (graphic tutorial)

Use axios to encapsulate the fetch method and call

What are the differences between Map and ForEach in JS?

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!