WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현

angryTom
풀어 주다: 2020-03-10 10:25:37
앞으로
4807명이 탐색했습니다.

이 글은 배너 캐러셀의 효과를 얻기 위해 WeChat 애플릿을 사용하는 방법을 소개합니다. 이는 WeChat 애플릿 개발을 배우는 친구들에게 도움이 되기를 바랍니다.

WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현

WeChat 애플릿을 사용하여 배너 캐러셀 그래프 구현

프론트 엔드 엔지니어의 작업에서 배너는 필수인데 DOM이 없는 작은 프로그램은 어떻게 배너 이미지를 구현합니까? 프레임워크는 다양한 방법을 캡슐화합니다. 배너 그래픽도 미니 프로그램에 배너의 방법이 요약되어 있습니다. 하나씩 설명하겠습니다.

"미니 프로그램 개발"

1: 준비

아래 그림 두 장을 사용합니다. :

WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현

두 가지: xsml 코드(예: html) 작성

여기에서 태그를 사용하면 다음과 같은 속성이 있습니다. xsml 페이지를 단순하게 유지하기 위해 여기서는 for 루프를 사용하여 루프를 위해 사용된 리소스를 js에 넣습니다. 그리고 데이터의 양방향 바인딩을 가능하게 하기 위해 해당 속성값을 js에 넣어서 구성할 계획입니다. 내 xsml 코드는 다음과 같습니다.

<swiper indicator-dots="{{indicatorDots}}" 
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"> 
      <block wx:for="{{arr}}"> 
        <swiper-item> 
            <image src="{{item}}" class="slide-image" width="355" height="150"/> 
        </swiper-item> 
      </block> 
</swiper>
로그인 후 복사

WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현Three: js 구성WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현

양방향 바인딩이므로 js에서 필수 매개변수만 구성하면 됩니다. 내 두 사진은 1.jpg와 2.jpg를 사용하므로 js에서 작은 루프만 수행하면 됩니다. 상황에 따라 사진의 주소를 배열 뒤에 직접 넣을 수도 있습니다. 그렇지 않으면 js 코드는 다음과 같습니다.

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    mode:"scaleToFill",
    arr:[],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 1000,
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var array = this.data.arr
    for (let i = 1; i < 3; i++) {
      array.push("img/" + i + ".jpg")
    }
    this.setData({ arr: array})
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
       
      
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
 
})
로그인 후 복사
좋아, 최종 효과를 살펴보겠습니다.


몇 가지 작은 세부 사항은 여전히 ​​직접 수행해야 합니다. 가서 조정하세요. xsss 코드.

WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현

더 많은 관련 튜토리얼을 보려면

PHP 중국어 웹사이트
를 주목하세요!

위 내용은 WeChat 애플릿을 사용하여 배너 캐러셀 이미지 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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