Maison > Applet WeChat > Développement de mini-programmes > Image carrousel des requêtes réseau du mini-programme WeChat

Image carrousel des requêtes réseau du mini-programme WeChat

不言
Libérer: 2018-06-23 16:47:14
original
2374 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur le graphique carrousel demandées par l'applet WeChat via Internet. Les amis qui en ont besoin peuvent s'y référer

Le graphique carrousel de l'applet WeChat n'est pas le même que le. graphique carrousel d'Android, nous examinons ici l'introduction des contrôles que nous devons utiliser

Image carrousel des requêtes réseau du mini-programme WeChat

Ici, nous utilisons le composant swiper. propriétés de ce composant. Nous utilisons Ensuite, jetons un œil à l'API de requête réseau. Ici, nous utilisons la requête GET. Ouvrons l'API qui nous est officiellement donnée par l'applet WeChat

Image carrousel des requêtes réseau du mini-programme WeChat
. Image carrousel des requêtes réseau du mini-programme WeChat

La prochaine étape consiste à commencer le voyage de notre mini carrousel de programmes. Vous trouverez ci-joint un rendu

Tout d'abord, jetons un coup d'œil à notre fichier index.wxml

<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>
Copier après la connexion

fichier index.js

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
   })
  }
 })
 }
})
Copier après la connexion

index.wxss Voici les contrôles simples Prendre un aperçu du style affiché

.swiper_box {
 width: 100%;
}

swiper-item image {
 width: 100%;
 display: inline-block;
 overflow: hidden;
}
Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention à PHP Chinese net !

Recommandations associées :

L'applet WeChat implémente la fonction de menu contextuel

Introduction au plug-in de graphique de l'applet WeChat (wx-charts )

Méthode de recadrage de la zone de sélection d'image de l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal