自定义组件使用教程
登录组件 -（wxc-login）
image
F_app_login
##写入登录信息，默认为空，当登录后返回userinfo
D_app
#执行登录函数，当成功登录后写入缓存 #userinfo
F_app_login
xxx.js设置
载入功能模块
//---------加载功能------------------
Zan.App.Fun_app, //加载登录功能
//----加载页面data--------------------
载入登录信息
onLoad: function(options) {
//全局函数加载执行默认DATA数据----------------
this.D_app(); //登录提示
}
xxx.json设置
{
"component": true,
"usingComponents": {
"wxc-login": "/packages/wxc-login/dist/index"
}
}
xxx.wxml设置
<!-----------
isshow="{{logged}}" 判断是否登录
items="{{userInfo}}" 加载用户信息
bind:change="F_app_login" 返回执行函数-->写入缓存
kclass 头像样式
fontclass 字体样式
---------------->
<wxc-login
isshow="{{logged}}"
items="{{userInfo}}"
bind:change="F_app_login"
kclass="bg-1 p-0 cor-f j k-tx-1 wh mt-1 font-dl background-size3 mt-4 yy-1 wk-web-bj"
fontclass="k-font z-4 cor-h font-x1 mt-1 mb-4">
</wxc-login>
加载组件 -（wxc-loading）
image
F_w_jz
D_w_jz #默认数据
F_w_jz_t #显示
F_w_jz_f #隐藏
xxx.js设置
var kpage=Object.assign(
// 启动加载全局函数
Zan.App.Fun_ts,
kdata,
{
onLoad: function(options) {
//载入data文件
this.D_w_jz();
}
}
);
xxx.json设置
#加载插件目录
{
"component": true,
"usingComponents": {
"wxc-loading": "/packages/wxc-loading/dist/index"
}
}
xxx.wxml设置
# 模板位置
<wxc-loading is-show="{{k_loading}}" text="提交试卷中..." _pid="{{_pid}}" class="z-5"></wxc-loading>
# 弹出按钮
<span bindtap="F_w_jz_t">11111111111</span>
下拉组件 -（ui-popup）
image
F_w_xl
D_w_xl //数据
F_w_xl_t //显示下拉
F_w_xl_f //隐藏下拉
xxx.js设置
var kpage=Object.assign(
Zan.App.Fun_ts,//启动加载全局函数
kdata,
{
onLoad: function(options) { //页面启动加载
this.D_w_xl(); //页面启动DATA
}
}
xxx.json设置
"ui-popup": "/packages/touchui-wx-components/ui-popup/dist/index",
xxx.wxml设置
/*参数：
height:80% 设置下拉高度
show="{{ xl_show }}" 显示/隐藏
position="bottom" 下出
*/
<ui-popup show="{{ xl_show }}" position="bottom" height="80%" _pid="{{_pid}}" >
<view slot="n1">
<span bindtap="F_w_xl_f" plain type="primary" class="p-1 btn-1 m-3 j-2 bg-f wh bar-3">关闭</span>
</view>
<view slot="n2" class="flex f-rl c-b flex-wrap p-4 pt-1 scroll-y hol-10 ">
111111111111111111
</view>
</ui-popup>
页面样式2 wxml
/*参数：
height:80% 设置下拉高度
show="{{ xl_show }}" 显示/隐藏
position="bottom" 下出
background="transparent" 设置背景
*/
<ui-popup show="{{ xl_show }}" height="100%" background="transparent" _pid="{{_pid}}" >
<view slot="n2" class="page flex f-tb c-b wh" bindtap="F_w_xl_f">
<view class="bg-f j-3 flex col-10 hol-5" >
111111111111111
</view>
</view>
</view>
</ui-popup>
#调用函数
<span bindtap="F_w_xl_t">11111111111</span>
弹窗组件 —（ui-mask）
image
F_w_tc
D_w_tc 默认数据
F_w_tc 显示/隐藏
页面JS
var kpage=Object.assign(
Zan.App.Fun_ts,//启动加载全局函数
kdata,
{
onLoad: function(options) { //页面启动加载
this.D_w_tc (); //页面启动DATA
}
}
);
插件目录
"ui-mask": "/packages/touchui-wx-components/ui-mask/dist/index"
页面wxml
<ui-mask show="{{tc_show}}" hide-on-tap="{{false}}" effect="scale-in" animation="" _pid="{{_pid}}">
<view class="content content2 f-tb flex c-l" data-show="{{ false }}" >
<view>内容</view>
<button type="success" data-show="{{ false }}" class="bg-8 p-2 m-2 k-font-1 wh cor-8 col-7" bindtap="F_w_tc">取消</button>
</view>
</ui-mask>
页面调用
<span bindtap="F_w_tc" data-show="{{ true }}">11111111111</span>
列表选项组件 —（wxc-select）
image
页面JS
var kpage=Object.assign(
Zan.App.Fun_form,//启动加载全局函数
kdata,
{
onLoad: function(options) { //页面启动加载
this.D_w_select (); //页面启动DATA
}
}
);
插件目录
"wxc-select": "/packages/wxc-select/o2/index"
页面wxml
/*参数：
items="{{items}}" 数据 items: [{ value: '1', title: '火箭' }, { value: '2', title: '勇士' }, { value: '3', title: '开拓者' }, { value: '4', title: '雷霆' }]
wx:if="{{select_show}}" 显示/隐藏
color banding颜色
checked 默认属性
*/
<wxc-select items="{{items}}" wx:if="{{select_show}}" id="1" isshow='{{select_show}}' color="#28a745" checked="" bind:change="F_w_select" _pid="{{_pid}}"></wxc-select>
数据回调函数
F_w_select(e){
}
进度条 —（wxc-progress）
image
插件目录
"wxc-progress": "/packages/wxc-progress/dist/index"
页面wxml
/*参数：
stroke-width="5" 进度条高度
active-color="#ac89ff" 进度条颜色
percent ="80" 目前进度
*/
<wxc-progress stroke-width="5" active-color="#ac89ff" percent="80" _pid="{{_pid}}"></wxc-progress>
倒计时 —（wxc-countdown）
image
D_w_djs 默认数据
页面JS
var kpage=Object.assign(
Zan.App.Fun_gn,//启动加载全局函数
kdata,
{
onLoad: function(options) { //页面启动加载
this.D_w_djs (down='100',format='mm分钟ss',font='28',ys='#000'); //页面启动DATA
}
}
);
插件目录
"wxc-countdown": "/packages/wxc-countdown/dist/index"
页面wxml
<wxc-countdown countdown="{{djs_countdown}}" format="{{djs_format}}" num-style="{{djs_numStyle}}" symbol-style="{{djs_symbolStyle}}" _pid="{{_pid}}"></wxc-countdown>
