Carousel image of WeChat mini program network requests

不言
Release: 2018-06-23 16:47:14
Original
2209 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

Carousel image of WeChat mini program network requests

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

Carousel image of WeChat mini program network requests
that the WeChat applet officially gave us.Carousel image of WeChat mini program network requests

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

        
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: 'http://huanqiuxiaozhen.com/wemall/slider/list', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, //成功后的回调 success: function (res) { console.log('11111' + res), that.setData({ images: res.data }) } }) } })
Copy after login

index.wxss Here is a simple control of the display Style

.swiper_box { width: 100%; } swiper-item image { width: 100%; display: inline-block; overflow: hidden; }
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat applet implements pop-up menu function

Introduction to WeChat applet chart plug-in (wx-charts)

WeChat applet picture selection area cropping implementation method

The above is the detailed content of Carousel image of WeChat mini program network requests. 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
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!