Sharing examples of WeChat applet completing carousel effect

黄舟
Release: 2017-09-12 09:19:06
Original
2923 people have browsed it

This article mainly introduces the effect of carousel chart in WeChat applet in detail, which has certain reference value. Interested friends can refer to

WeChat applet to realize carousel chart. The effect is similar to that of websites and APPs, with less code and high efficiency.

Let’s take a look at the renderings first:

##Mainly use swiper + swiper-item to achieve


 <view class=&#39;swiper&#39;>滑块视图容器</view>
<!--
 indicator-dots=&#39;true&#39; 是否显示指示点 默认 false
 indicator-color:指示点颜色
 indicator-active-color:选中的指示点颜色
 autoplay:是否自动切换 默认:false
 interval:自动切换时间间隔
 duration:滑动动画时长
 vertical 是否改成纵向, 默认 false
 -->

<swiper indicator-dots=&#39;true&#39; indicator-color=&#39;gray&#39; indicator-active-color=&#39;green&#39; autoplay=&#39;true&#39; interval=&#39;5000&#39; duration=&#39;500&#39;>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src=&#39;{{item}}&#39; class=&#39;swiper_image&#39; mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>
Copy after login

A simple small case, a carousel chart, the code is concise and the function is powerful.

The above is the detailed content of Sharing examples of WeChat applet completing carousel effect. 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