软件开发历劫之路

zanUI组件的使用样例

2020-08-25  本文已影响0人  鱼之乐_子焉知

zanUI-WeApp的GitHub地址:https://github.com/youzan/zanui-weapp

20180725094452415.png

把dist文件克隆到小程序项目中并新建toast的测试文件,如图所示:

文件目录
第一步:在json文件中引入组件(差点忘了,给前面浏览的朋友带来困扰了,今天我就来补充上)
{
  "usingComponents":{
    "zan-toast":"/dist/toast/index"
  }
} 
第二步:编写wxml文件,代码如下:
/* pages/toast/toast.wxss */
.box1{
    width: 60%;
    height: 100rpx;
    border: 1rpx solid #0bb20c;
    border-radius: 20rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 80% auto 0 auto;
}
第四步:编写js文件,代码如下:
// pages/toast/toast.js
const Toast = require('../../dist/toast/toast');
Page({
    showToast: function(){
        Toast({
            selector: '#zan-toast-test',
            message: 'toast内容'
        });
  }

})
效果,如图所示:
测试结果

各位看官觉得有用吗?有用就给点赏呗~~~

转载请注明出处哦!

上一篇下一篇

猜你喜欢

热点阅读