Wechat applet | rotation chart

​ WeChat official account ：" Beauty of algorithm and programming ", Welcome to your attention , Learn more about this series article ​

Problem description

What is a rotation chart ？

Generally speaking, the rotation chart is in a module or window , Click with the mouse on the computer 、 Slide your finger on the phone , You can see multiple pictures . The location of the carousel map is usually placed at the beginning of the page , With eye-catching content 、 Highlight the key points . The carousel chart is often used for feature recommendation in general pages , For example, the rotation pictures on Taobao are all special offers and other good things . The rotation chart is in use , The most important feature is real-time update . The rotation chart in the small program also has the above characteristics .

Solution

Tags in applets ：

WeChat Small program production and HTML Front end production is similar , The production process is also very similar , It's still a framework , Style modification , Feature set . But wechat applet is different from HTML The label is totally different , Wechat applet has its own writing tag . During the compilation of the rotation chart , The labels we often use are <view>、<swiper>、 <block>、<swiper-item>、<image>. One of the more important things is Swiper label , It is a slider container class component , Some of the following properties are provided .

chart 2.1 swiper Common properties

Production of rotation map ：

After understanding the above basic knowledge , Combine what we have learned HTML Knowledge can start the production of the rotation map .Swiper Slider assembly code , have indicator-dots,autoplay,interval,duration Four properties .indicator-dots： Display panel indicator （ The default value is false）、autoplay： Auto switch or not （ The default value is false）、interval： Auto switch interval ( The default value is 5000)、duration： The length of the slide animation （ The default value is 500）.

 .wxml The code of the file is as follows ：

<view>   <!-- Shuffling figure -->      <swiper indicator-dots='true' autoplay='true' interval='5000'  duration='1000' circular='true'>        <block wx:for="{{movies}}" wx:for-index="index">          <swiper-item>            <image src='{{item.url}}' mode='aspectFill'></image>          </swiper-item>        </block>      </swiper>   </view>

stay .wxss In file , We only need to set certain properties for the relevant tags . Because this time we are making a rotation chart , So the only relevant values are pictures . stay .js In file , Yes movies Assign a value to .

Page({    data: { inputValue: '', // Search content      // Shuffling figure      movies: [        { url: '../../images/s1.jpg' },        { url: '../../images/s2.jpg' },        { url: '../../images/s3.jpg' },        { url: '../../images/s4.jpg' }      ], } }]

The renderings are as follows ：（ The screenshot is incomplete ）

chart 3.1 design sketch

END

Internship editor in chief    |   Wang Nanlan

responsibility       Ed    |   Liu    even

​ where2go The team ​​

---

WeChat Number ： Beauty of algorithm and programming           

Long press identification QR code to follow us !

Write a message ” Comment , Looking forward to your participation ！