Wechat applet 02 - Implementation of rotation map and picture click jump

Realization effect ：

 

Preface

In a small program 01 in , I have learned how to make the bottom navigation bar , In this section, let's learn how to make a carousel map , And click the carousel map to complete the page Jump .

Implementation process

notes ：（1） Early learning , I use local pictures here , Later on , It can connect with the back-end interface , Get data dynamically , Easy to learn in the early stage , Just use the local pictures for the time being .（2） About picture jump address , Because other pages have not been written in the early stage , So what I jump here is switching Tab, If there is a return jump link in the later data , Can be removed  navigator  In the tag    open-type="switchTab"  attribute .

1 stay index.wxml In file , Add the following code ：

  <!--  Head advertisement diagram  -->
  <swiper class="top-banner"  indicator-dots="{
   {indicatorDots}}" autoplay="{
   {autoplay}}"  interval="{
   {interval}}" duration="{
   {duration}}">
    <block wx:for="{
   {images_list}}" wx:key="id">
      <navigator url="{
   {item.link}}" open-type="switchTab">
        <swiper-item >
            <image src="{
   {item.image_url}}" class="slide-image"></image>
        </swiper-item>
      </navigator>
    </block>
  </swiper>

2 stay index.wxss Add the style of rotation chart in the file

.top-banner {
  width: 100%;
  height: 360rpx;
}
 
.slide-image {
  width: 100%;
  height: 100%;
}

3, stay index.js In file increase data Parameters

Page({
  data: {
    autoplay: true,
    indicatorDots: true,
    interval: 3000,
    duration: 1200,
    images_list : [
      {
        "id": 1,
        "image_url": "../../images/banner1.jpg",
        "link": "../list/list"
      },
      {
        "id": 2,
        "image_url": "../../images/banner2.jpg",
        "link": "../mine/mine"
      },
    ],
  },
  //  Event handler 
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs',
    })
  },
  onLoad() {
    
  },
})

  The pit of tread

  Follow the online tutorial , Add a jump link to the picture （ Here's the picture ）, Picture not shown .

 

  There is less documentation on this issue , One of them said ,navigator    The label on the swiper-item Outside the label , So I tried , The code is changed to the following figure ：

  Then the rotation chart can be displayed normally .