列表页替换卡片插件
# 简介
列表页替换卡片插件是移动端列表支持的自定义插件,允许开发者在列表页中自定义卡片替换逻辑,实现更加复杂的定制业务逻辑。
# 快速上手
# 下载插件demo
# 插件代码上传
web端 => 管理后台 => 定制开发平台 => 自定义插件 => 新建 => 插件类型选择列表页卡片替换插件 => 上传代码zip包 => 保存并发布
# 插件配置
在对象管理后台 => 列表布局 => 移动端列表页卡片替换插件 => 可选择不限制对象或指定为当前对象的移动端列表页卡片替换插件 => 保存
# 功能描述
- 列表页自定义插件,根目录下必须有config.json(components:注册需要暴露给插件使用方的组件。组件名称固定为root,value为组件的相对路径,插件内部子组件无需注册)
# 参数
字段 | 说明 | 类型 |
---|---|---|
context | 上下文环境 | Object |
# context
字段说明
属性 | 说明 | 类型 |
---|---|---|
objectData | 对象的数据 | Object |
isNewLayout | 是否开启灵活布局 | Bool |
title | 卡片标题(非灵活布局使用) | Object |
leftData | 左侧字段(非灵活布局使用) | Array |
rightData | 左侧字段(非灵活布局使用) | Array |
dataList | 左侧字段(开启灵活布局使用) | Array |
showImagePath | 左侧图片url | String |
showTag | 是否展示标签 | Bool |
tags | 标签数据 | Array |
buttons | 按钮 | Array |
getObjectInfo | 获取对象描述布局方法 | Function |
listCaller | 列表回调方法 | Function |
# 代码示例
config.json
{
"components":{
"root":"./components/abc/index"
}
}
components/abc/index.js
Component({
properties: {
context:{
type: Object,
value: {},
observer(val){
this._initData && this._initData()
}
},
},
methods:{
_initData(){
this.setData({
leftData:this.data.context.leftData,
rightData:this.data.context.rightData
})
console.log('_initData'+JSON.stringify(this.data.context))
}
},
lifetimes:{
attached() {
console.log("attached")
}
}
});
components/abc/index.wxml
<view>这是自定义卡片</view>
<view class="container">
<view class="left">
<view class="item" wx:for="{{leftData}}">
<view>{{item.label}}</view>
<view style="margin-left:4px;">{{item.showValue}}</view>
</view>
</view>
<view class="right">
<view class="item" wx:for="{{rightData}}">{{item.showValue}}</view>
</view>
</view>
components/abc/index.json
{
"component": true,
"usingComponents": {}
}
components/abc/index.wxss
.container{
display: flex;
flex-direction: row;
background-color: green;
}
.left{
width:70%;
}
.right{
width:30%;
}
.item{
display: flex;
flex-direction: row;
align-items: center;
height: 24px;
}
← 开发小程序自定义插件 简介→