小程式基礎核心元件庫處理Banner、圖片上傳、列表重新整理

芒言發表於2018-06-30
元件

快速上手

簡介

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的點選回撥

效果圖

image.png | left | 251x446

使用

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

圖片上傳

圖片上傳元件

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

效果圖

image.png | left | 425x349

使用

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"
複製程式碼

image.png | left | 245x309

image.png | left | 238x433

使用

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)
  }

複製程式碼

相關文章