WeChat Mini 프로그램의 인터넷 요청에 대한 캐러셀 차트에 대한 자세한 설명

黄舟
풀어 주다: 2017-09-13 10:36:18
원래의
2071명이 탐색했습니다.

이 글은 인터넷을 통해 WeChat 애플릿에서 요청한 캐러셀 사진에 대한 관련 정보를 주로 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

여기서 WeChat 애플릿의 캐러셀 사진은 Android의 캐러셀 사진과 동일하지 않습니다. 사용해야 하는 컨트롤에 대한 소개를 살펴보겠습니다.

WeChat Mini 프로그램의 인터넷 요청에 대한 캐러셀 차트에 대한 자세한 설명

여기서 swiper 구성 요소를 사용하면 위 그림에 이 구성 요소의 모든 속성이 나열되어 있습니다. 다음으로 네트워크 요청 API를 살펴보겠습니다. 여기서 사용하는 것은 WeChat 미니 프로그램에서 공식적으로 제공하는 API를 열어보겠습니다.

WeChat Mini 프로그램의 인터넷 요청에 대한 캐러셀 차트에 대한 자세한 설명
WeChat Mini 프로그램의 인터넷 요청에 대한 캐러셀 차트에 대한 자세한 설명

다음 단계는 미니를 시작하는 것입니다. 첨부된 프로그램 캐러셀 차트 여정은 렌더링입니다

먼저 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>
로그인 후 복사

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
   })
  }
 })
 }
})
로그인 후 복사

index.wxss 여기서는 간단히 디스플레이 스타일을 제어합니다


rreee

위 내용은 WeChat Mini 프로그램의 인터넷 요청에 대한 캐러셀 차트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿