小程序基础库版本 1.9.90 以上(可升级小程序开发工具为最新)。
项目git地址: git.coding.net/prin/mangom…
- 组件库引入 将mangom-we-demo项目下的pages/mangom-we文件夹导入到项目的的pages目录下,与其他page同级。
- 样式导入
//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)
}