更新记录
1.1.0(2024-01-03)
下载此版本
修复了g-list在post接口情况下加载更多的问题
1.0.9(2023-12-13)
下载此版本
优化g-list下拉刷新表现
1.0.8(2023-09-21)
下载此版本
- g-privacy支持自动识别是否需要授权,添加在对应页面自动识别
- g-privacy去除value字段,由组件来控制显影
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.7.13 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
gama-ui 1.0.01版本发布 2023-9-1
- 本组件基于uview制作的低代码组件库,使用本组件库请下载uview2.0.34版本
- 本次完善了list组件,拓展了post方法的支持
使用指南
- 安装uview2.0.34版本
- 安装gama-ui
- 在 main.js 中将接口方法绑定在全局uni下
http文件(仅供参考,请添加个人的请求实例方法)
import {
POST,
GET,
DELETE,
PUT
} from '@/api/request.js';
const baseUrl = 'app-api/';
function get(url, data) {
return GET(baseUrl + url, data);
}
function post(url, data) {
return GET(baseUrl + url, data);
}
export default {
get,
post
}
main.js 中绑定方法
// 将请求方法添加到uni对象中
import http from '@/api/http.js'
uni.$http = http
- 在需要的页面中使用组件 g-list
<g-list :auto-list="true" url="group/op/member/page" :query="query" :list.sync="list" :total.sync="total"
pageType="list">
<block v-for="(item,index) in list" :key="index">
<!-- 列表的item项 -->
</block>
</g-list>
/**
* @description 该组件为高性能列表组件,自动计算屏幕可使用高度
* @property {Boolean} isSafe 控制底部是否适配ios底部横条 默认 true
* @property {String | Number} height 列表的高度 (默认 0 )
* @property {String | Number} width 列表宽度 (默认 0 )
* @property Array nodeList 占位节点名称的数组用于计算屏幕可使用高度 (默认 [".mainTop"])
* @property {Boolean} autoList 是否自动调用接口列表数据 (默认 false)
* @property {Object} query 查询的参数,请用.sync修饰符添加该属性 (默认 {pageNum: 1,pageSize: 20,})
* @property {String} method 查询类型 (默认 'get')
* @property {String} url 查询路径 (默认 '')
* @property {Array} list 查询返回的结果列表,请用.sync修饰符添加该属性 (默认 [])
* @property {Boolean} loadMoreShow 底部的显示更多文字是否显示 (默认 true)
* @property {String} editId 用于修改单个数据的时候更新列表,会通过该id进行查询遍历 传递idName,调用$ref.editUpdate()来判断当前数据是否被删除 (默认 '')
* @property {String} idName 查询数据是否更新的关键字 配合editId使用 (默认 'id')
* @property {String | Number} total 列表总数,请用.sync修饰符添加该属性 (默认 '')
* @property {String | Number} pageType 接口返回的list关键字名,default默认从res.[${resName}].records中取,否则则在res.[${resName}][${pageType}]中取list值 (默认 'default')
* @property {String | Number} resName 接口返回的list关键字名,default默认从res.[${resName}].records中取,否则则在res.[${resName}][${pageType}]中取list值 (默认 'default')
* @property {String | Number} thenCode 接口成功的code(默认 0)
* @property {String | Number} top 顶部的距离,未定义则自动计算(默认 0)
* @property {String | Number} position 定位类型,默认fixed,可选sticky(默认 0)
* @property {String | Number} pageName 分页页码数名字(默认 pageNo)
*/
g-list简介
基于uview制作的列表页通用解决方案, 可调用不同的接口地址自动查询并更新list,解决了如下的疼点
- 页面中有吸顶的元素,tab组件的时候,传统scroll-view需要手动计算屏幕可使用的高度,g-list 仅需给吸顶元素mainTop的calss类名即可实现自动铺满剩余屏幕空间,也可以制定nodelist来遍历多个dom分别计算高度来获取剩余空间
- 移动端分页管理下拉刷新等都是重复逻辑代码,但是因为接口路径不同,我们通常在不同的页面会写很多遍,将这类逻辑抽出即可简便传统列表页的工作
- 当我们删除或者编辑移动端分页的某一个元素的时候,通常是重新回到第一页重新调用接口查询更新数据,但是这样解决不利于用户体验,g-list采用接口单独查询变化来实现的效果,会从当前页一步步遍历到第一页,只要查询到对应editId的数据,那么就会单独更新该元素,优化体验,但是这个操作不考虑同一角色在不同设备并发编辑的情况,请合理使用