自定义组件使用教程

---

登录组件 -（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>