Heim  >  Artikel  >  WeChat-Applet  >  Karussellbild der Netzwerkanfragen des WeChat-Miniprogramms

Karussellbild der Netzwerkanfragen des WeChat-Miniprogramms

不言
不言Original
2018-06-23 16:47:142332Durchsuche

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.

Karussellbild der Netzwerkanfragen des WeChat-Miniprogramms

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 Karussellbild der Netzwerkanfragen des WeChat-Miniprogramms
Werfen wir zunächst einen Blick auf unsere index.wxml-Datei Karussellbild der Netzwerkanfragen des WeChat-Miniprogramms

<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: &#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
   })
  }
 })
 }
})

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn