Detailed explanation of the carousel chart for Internet requests in WeChat Mini Program-Mini Program Development-php.cn

Detailed explanation of the carousel chart for Internet requests in WeChat Mini Program

黄舟

Release： 2017-09-13 10:36:18

Original

2035 people have browsed it

This article mainly introduces the relevant information about the carousel chart requested by the WeChat applet through the Internet. Friends who need it can refer to it

The carousel chart of the WeChat applet is not the same as the carousel chart of Android. , here we take a look at the introduction of the controls we need to use

Detailed explanation of the carousel chart for Internet requests in WeChat Mini Program

Here we use the swiper component. The above picture has listed all the properties of this component. We use Next, let’s take a look at the network request API. Here we use the GET request. Let’s open the API

Detailed explanation of the carousel chart for Internet requests in WeChat Mini Program
that the WeChat applet officially gave us.

The next step is to start our mini program carousel chart journey. Attached is a rendering

First, let’s take a look at our index.wxml file

<view>
 <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
 <block wx:for="{{images}}">
  <swiper-item>
  <image src="{{item.picurl}}" class="slide-image" />
  </swiper-item>
 </block>
 </swiper>
</view>

Copy after login

index.js file

var app = getApp()
Page({

 /**
 * 页面的初始数据
 */
 data: {
 //是否显示指示点 true 显示 false 不显示
 indicatorDots: true,
 //控制方向
 vertical: false,
 //是否自动切换
 autoplay: true,
 //自动切换时间间隔
 interval: 3000,
 //滑动动画时长
 duration: 1000,
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this
 //调用应用实例的方法获取全局数据
 app.getUserInfo(function (userInfo) {
  //更新数据
  that.setData({
  userInfo: userInfo
  })
 })
 //网络请求 GET方法
 wx.request({
  url: &#39;http://huanqiuxiaozhen.com/wemall/slider/list&#39;,
  method: &#39;GET&#39;,
  data: {},
  header: {
  &#39;Accept&#39;: &#39;application/json&#39;
  },
  //成功后的回调
  success: function (res) {
  console.log(&#39;11111&#39; + res),
   that.setData({
   images: res.data
   })
  }
 })
 }
})

Copy after login

index.wxss Here is a simple way to control the display style

.swiper_box {
 width: 100%;
}

swiper-item image {
 width: 100%;
 display: inline-block;
 overflow: hidden;
}

Copy after login

The above is the detailed content of Detailed explanation of the carousel chart for Internet requests in WeChat Mini Program. For more information, please follow other related articles on the PHP Chinese website!