微信小程序實戰開發五:使用自定義組件配置一個通用的圖片輪播組件。

編輯:睿兒發表于:2020-08-29 20:23:58 33 次閱讀
原創聲明:本內容(微信小程序實戰開發五:使用自定義組件配置一個通用的圖片輪播組件。)為睿兒網絡原創作品,任何媒體、網站或個人未經本網協議授權不得轉載、鏈接、轉貼或以其他方式復制發布/發表。如需轉載請聯系站長QQ:7280374 請注明申請文章轉載!

在開發中有很多時候為了節約代碼,方便使用各種功能,我們需要創建很多類、方法、過程。小程序也是一樣,小程序所有的方法、過程、類都封裝成了一個叫組件的東西,包括微信提供的WEUL組件等等,而且我們還可以自定義組件,把重復使用性高的代碼封裝成組件方便調用。

自定義組件創建方式,先自已建一個文件夾,命名為 components 

在這個文件夾下面創建自已的不同的組件,我們今天創建的就是一個 swiper 圖片輪播組件。

image.png

文件創建好之后我們先在WXML文件中把需要的代碼寫上。代碼如下:使用微信提供的swiper創建一個輪播組件。

<swiper easing-function="{{easeInOutCubic}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="{{indicator_active_color}}" indicator-color="{{indicator_color}}"  style="height:{{height}}">
    <block wx:for="{{imgUrls}}" wx:key="id">
      <swiper-item>
         <image src="{{item.photoUrl}}" class="slide-image"  bindtap="swiperLink" data-linktype="{{item.linktype}}" data-url="{{item.linkurl}}" /> 
      </swiper-item>
    </block>
  </swiper>


因為要重復在不同的情況下使用,所以需要傳不同的參數用來控制組件的外觀樣式及內容。

從上面的代碼可以看到我們有很多參數,這些參數都需要在 .js文件中定義才能使用。

.JS文件如下:

// components/swi.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    height: String,
    imgUrls: Array,
    indicatorDots: String,
    autoplay: String,
    interval: Number,
    duration: Number,
    indicator_active_color:String,
    indicator_color:String,
    easeInOutCubic:String
  },
  /**
   * 組件的初始數據
   */
  data: {
  },
  /**
   * 組件的方法列表
   */
  methods: {
    swiperLink:function(e){
      //console.log("233");
      //console.log(e);
      if(e.currentTarget.dataset.linktype==1){//鏈接到導航條上的頁面
          wx.switchTab({
                url: e.currentTarget.dataset.url
              });
      }else if(e.currentTarget.dataset.linktype==2){
        wx.navigateTo({
                url: e.currentTarget.dataset.url
              });
      }
     }
  }
})

我們在JS文件中,通過定義參數的方法把需要接收的數據都定義好,然后還寫了一個點擊事件,因為圖片上面可能會加鏈接。。。


這樣一個組件就創建好了。我們引用它的時候怎么引用呢?


先在需要引用組件的.JSON文件中載入組件。

{
  "usingComponents": {
   
    "my-swiper": "../../components/swiper/swiper",
    "mp-loading": "weui-miniprogram/loading/loading"
  }
}

組件加載完成之后就可以直接使用了

在WXML文件中,我們根據定義的組件名稱,直接引用組件,并把各項參數都在組件里面定義好,這些參數會被組件中的JS文件獲取并使用。

<my-swiper height="300px" imgUrls="{{imgUrls}}" indicatorDots="true" autoplay="true" interval="3000" duration="1000" indicator_active_color="#ff3300" indicator_color="rgba(0, 0, 0, 1)" wx:if="{{swipersuccess=='true'}}">
  </my-swiper>
  <mp-loading class="swiperloading" type="circle" wx:else></mp-loading>


為了效果好看我們還用官方提供的loading組件給它做了一個預加載項。在沒有加載完成的時候顯示的是一個正在加載的樣式。

在 JS文件中,我們需要先把默認的參數定義好 在DATA里面我們需要定義  imgUrls 和  swipersuccess  兩個參數。


data: {

    //輪播圖開始
    imgUrls: [],
    swipersuccess:'loadding...',
   
  },


接下來我們只需要在JS代碼中通過wx.request 把 imgUrls 這個變量獲取了,并賦值就OK了。

因為整理了代碼,把所有方法封裝了,所以需要先引用封裝方法的JS

在JS文件中 引入 公用JS 

import  publicFunction  from "../../utils/publicFunction";


再在 onload 中使用  this是當前窗口,第二個參數是分類ID

publicFunction.getswiper(this,1);


直接獲取方法:

wx.request({
   url: wx.getStorageSync('requestUrl')+'request/getswiper.php', 
   data: {"class":1},
   method:"GET",
   header: {'content-type': 'application/json' },// 默認值
   success:function(swiper) {
    
     if(swiper.data.errorMsg=='success'){
      that.setData({swipersuccess:'true'});
      that.setData({imgUrls:swiper.data.imgUrls});
     }else{
      that.setData({swipersuccess:swiper.data.errorMsg});
      console.log(swiper.data.errorMsg);
     }


通過這個方法我們就從服務器上獲取到了圖片及鏈接數組。。最終調用結果展示OK。


image.png


總結:這里面我們用到了 自定義組件 服務器交互 兩個知識點。能過這個方法我們就可以直接在服務器上控制輪播圖的展示,維護。可以免去修改了之后再去發布版本的麻煩。

原文地址:http://www.zgqngk.com/library/202008/31.html(張家口導航-睿兒知識庫)

張家口睿兒網絡科技有限公司版權所有
国产美女精品自在线拍