小程序基礎核心組件庫處理Banner、圖片上傳、列表刷新

快速上手

簡介

mangom-we小程序基礎核心組件庫，讓業務開發更加關注業務而且快速實現。

環境準備

小程序基礎庫版本 1.9.90 以上（可升級小程序開發工具爲最新）。

使用

獲取源碼

項目git地址：git.coding.net/prin/mangom…

配置

1. 組件庫引入 將mangom-we-demo項目下的pages/mangom-we文件夾導入到項目的的pages目錄下，與其餘page同級。
2. 樣式導入

//app.wxss中導入樣式
@import 'pages/mangom-we/mg.wxss';

複製代碼

使用一個banner組件

//Demo.json配置文件中引入組件，代碼以下 
{
    "usingComponents": {"banner": "../mangom-we/banner/banner"}
}

/** Demo.xml結構中使用組件 *   ds是組件接受數據的統必定義屬性，imgUrls是提供的數組數據 *  class-img-item是控制banner中子項的樣式展現，無需自定義的話則使用默認樣式 */    

<banner ds="{{imgUrls}}" class-img-item="mg-banner-img-item"/>

複製代碼

小程序在同一個節點上使用普通樣式類和外部樣式類時，兩個類的優先級是未定義的，爲了解組件支持樣式默認和自定義，採用全部組件默認樣式配置在一個樣式表中提供使用，且開放自定義組件樣式屬性功能。

Banner

輪播圖組件

• 支持是否自動輪播配置
• 支持banner樣式的設置
• 支持指示器的屏蔽
• 支持點擊item的點擊回調

效果圖

使用

1.在.json配置文件中配置banner組件的引入。

{
	"navigationBarTitleText": "Banner組件",
	"usingComponents": {
		"banner": "../mangom-we/banner/banner"
	}
}

複製代碼

2.在.wxml結構文件中引入組件結構。

<!--pages/banner/banner.wxml-->
<banner ds="{{imgUrls}}" autoplay="{{false}}" class-item="mg-banner-item" binditemPress="onBannerItemPress"/> <view bindtap='onBannerItemPress'> <text>我是內容</text> </view> 複製代碼

3.在.js行爲文件中提供數據並處理點擊子項回調。

// pages/banner/banner.js
Page({
  /** * 頁面的初始數據 */
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
  },

  /** * 生命週期函數--監聽頁面加載 */
  onLoad: function (options) {

  },

  /** * Banner子項點擊回調 */
  onBannerItemPress: function (e) {
    let itemId = e.detail.dataSource
    console.log("點擊子項返回的id值" + itemId)
  }
})
複製代碼

API

屬性

參數	說明	類型	默認值
indicatorDots	是否顯示面板指示點	Boolean	true
autoplay	是否自動切換	Boolean	true
ds	數據源	Array	無

方法

名稱	描述	說明
itemPress	點擊子項事件監聽	參數返回爲子項界面index

圖片上傳

圖片上傳組件

• 支持看大圖功能
• 支持拍照或者相冊中選擇
• 支持多選

效果圖

使用

1.在界面.json配置文件中引入組件使用。

{
  "component": true,
  "usingComponents": {
    "uploader": "../mangom-we/uploader/uploader"
  }
}
複製代碼

2.界面.wxml結構文件中引入組件。

<!--pages/uploader/uploader.wxml-->
<uploader url="{{url}}" hideHeader="{{false}}" binduploadSuccess="uploadSuccess" binduploadFail="uploadFail" /> 複製代碼

3.在.js文件中處理回調結果。 圖片上傳後，會返回圖片的相關信息，能夠按照以下代碼方式獲取全部上傳成功的photoUrl集合。

Page({
  data: {
    url: 'https://xxx.xxx.cn/upload/upavatar?spaceId=1&channel=ios&accessToken=XfIJVGMjPuMrwZpWTh',
    preUploadImgs: [], //待上傳到服務端的圖片連接
  },
  /** * 圖片上傳成功，組裝待上傳字符串 */
  uploadSuccess: function (e) {
    let url = e.detail.dataSource.data
    let obj = JSON.parse(url)
    let photoUrl = obj.data.photoUrl
    this.data.preUploadImgs.push(photoUrl)

    console.log(this.data.preUploadImgs)

  }
});
複製代碼

API

屬性

參數	說明	類型	默認值
url	上傳圖片的地址	String	無
hideHeader	是否隱藏頭部	Boolean	true

方法

名稱	描述	說明
uploadSuccess	圖片上傳成功回調	拿到成功回調信息進行處理
uploadFail	圖片上傳失敗回調	作些失敗處理

列表刷新數據

下拉刷新，上拉加載獲取數據

效果圖

下拉刷新（注意：下拉刷新樣式默認是白色的，能夠在app.json文件中設置主色來提高效果）

"backgroundColor": "#f0145a"
複製代碼

使用

1.在界面配置.json文件中開啓下拉刷新，並引入加載更多組件。

{
  "usingComponents": {
    "load-more": "../mangom-we/load-more/load-more"
  },
  "window": {
    "enablePullDownRefresh": true
  }
}
複製代碼

2.在結構.wxml文件中引入加載更多組件結構

<!--上拉加載更多組件  -->
<view wx:if="{{showLoadMore}}"> <load-more loadingComplete="{{loadingComplete}}" /> </view> 複製代碼

3.行爲層.js處理（具體可參考demo實例）

1.導入mangom
import mangom from '../mangom-we/mangom.js'

2. 在data{}中加入頁面的初始數據
  data: {
    showLoadMore: false, //顯示加載更多
    loadingComplete: false,  //顯示加載完成
  },

3.監聽下拉刷新回調
//下拉加載
  onPullDownRefresh: function () {
    //清空加載更多結束 

    //開始刷新
    mangom.beginRefresh()

    //處理耗時任務
    獲取最新信息耗時任務(()=>{
     //回調成功 successCallBack
      mangom.overRefresh()
    })
  },

3.監聽加載更多
 onReachBottom: function () {
    mangom.beginLoadMore(this)
  },

4.處理加載更多完成
//加載更多數據和刷新數據應該能融於一塊兒
  loadData: function () {
    let that = this
    this.data.loadNum++
    if (this.data.loadNum > 6) {
      return
    }

    //獲取響應數據 需根據業務數據返回參考以下封裝 放在本項目的公共行爲處理工具類中
    setTimeout(() => {
      let rspWorlds = this.data.testRspWords
      if (this.data.loadNum === 6) {
        rspWorlds = [{ msg: '加載完畢的數據' }, { msg: '加載完畢的數據' }]
      } else {
        this.data.words = this.data.words.concat(rspWorlds);
      }
      console.log(rspWorlds && rspWorlds.length < PAGE_SIZE)
      that.setData({
        words: this.data.words,
        loadingComplete: this.data.loadNum!=0&& rspWorlds && rspWorlds.length < PAGE_SIZE,
        showLoadMore: false  //把"上拉加載"的變量設爲false，隱藏 
      })
    }, 1000)
  }

複製代碼