小程序基础核心组件库处理Banner、图片上传、列表刷新

小程序基础库版本??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';

{
	"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行为文件中提供数据并处理点击子项回调。

,'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',0);">'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],},/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },136);">/**
   * Banner子项点击回调
   */
  onBannerItemPress: function (e) {
    let itemId = e.detail.dataSource
    console.log("点击子项返回的id值" + itemId)
  }
})

图片上传组件

• 支持看大图功能
• 支持拍照或者相册中选择
• 支持多选

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

{
  "component": true,"usingComponents": {
    "uploader": "../mangom-we/uploader/uploader"
  }
}

2.界面.wxml结构文件中引入组件。

Page({
  data: {
    url: 'https://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)

  }
});

下拉刷新，上拉加载获取数据

下拉刷新（注意：下拉刷新样式默认是白色的，可以在app.json文件中设置主色来提升效果）

"backgroundColor": "#f0145a"

1.在界面配置.json文件中开启下拉刷新，并引入加载更多组件。

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

2.在结构.wxml文件中引入加载更多组件结构

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

2. 在data{}中加入页面的初始数据
  data: {
    showLoadMore: false,136);">//显示加载更多
    loadingComplete: //显示加载完成
  },3.监听下拉刷新回调
//下拉加载
  onPullDownRefresh: function () {
    //清空加载更多结束  

    //开始刷新
    mangom.beginRefresh()

    //处理耗时任务
    获取最新信息耗时任务(()=>{
     //回调成功 successCallBack
      mangom.overRefresh()
    })
  },0);">3.监听加载更多
 onReachBottom: function () {
    mangom.beginLoadMore(this)
  },0);">4.处理加载更多完成
//加载更多数据和刷新数据应该能融于一起
  loadData: function () {
    let that = this
    this.data.loadNum++
    if (data.loadNum > 6) {
      return
    }

    //获取响应数据   需根据业务数据返回参考如下封装  放在本项目的公共行为处理工具类中
    setTimeout(() => {
      let rspWorlds = data.testRspWords
      data.loadNum === 6) {
        rspWorlds = [{ msg: '加载完毕的数据' },{ msg: '加载完毕的数据' }]
      } else {
        data.words = data.words.concat(rspWorlds);
      }
      console.log(rspWorlds && rspWorlds.length < PAGE_SIZE)
      that.setData({
        words: data.words,loadingComplete: data.loadNum!=0&& rspWorlds && rspWorlds.length < PAGE_SIZE,showLoadMore: false  //把"上拉加载"的变量设为false，隐藏  
      })
    },0);">1000)
  }