2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

JavaScript前端.NET微信小程序作者:猿2048志愿者

快速上手

简介

mangom-we小程序基础核心组件库,让业务开发更加关注业务并且快速实现。

环境准备

小程序基础库版本 1.9.90 以上(可升级小程序开发工具为最新)。

使用

获取源码

项目git地址:https://git.coding.net/prin/mangom-we-demo.git

配置

  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

轮播图组件

效果图

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

本文来源于网络:查看 >
评论
点击刷新
评论
×添加代码片段