Heim >WeChat-Applet >Mini-Programmentwicklung >Karussellbild der Netzwerkanfragen des WeChat-Miniprogramms
In diesem Artikel werden hauptsächlich die relevanten Informationen zum Karusselldiagramm vorgestellt, die online vom WeChat-Applet angefordert werden. Freunde, die sie benötigen, können darauf zurückgreifen.
Das Karusselldiagramm des WeChat-Applets ist nicht dasselbe wie das Karusselldiagramm von Android. Hier werfen wir einen Blick auf die Einführung der Steuerelemente, die wir verwenden müssen.
Hier verwenden wir die Swiper-Komponente Diese Komponente verwenden wir. Als Nächstes werfen wir einen Blick auf die Netzwerkanforderungs-API. Hier verwenden wir die API, die uns offiziell vom WeChat-Applet bereitgestellt wurde >
Der nächste Schritt besteht darin, die Reise unseres Mini-Programmkarussells zu beginnen. Im Anhang finden Sie ein Rendering
Werfen wir zunächst einen Blick auf unsere index.wxml-Datei
<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>index.js-Datei
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 }) } }) } })index.wxss Hier ist eine einfache Steuerung des Anzeigestils
.swiper_box { width: 100%; } swiper-item image { width: 100%; display: inline-block; overflow: hidden; }Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website. Verwandte Empfehlungen:
WeChat-Applet implementiert Popup-Menüfunktion
Einführung in das WeChat-Applet-Diagramm-Plug-in (wx-charts )
Implementierungsmethode zum Zuschneiden des WeChat-Applet-Bildauswahlbereichs
Das obige ist der detaillierte Inhalt vonKarussellbild der Netzwerkanfragen des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!