zanUI组件的使用

版权声明：转载请注明出处 https://blog.csdn.net/qq_35770969/article/details/81196854

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

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

第一步：在json文件中引入组件（差点忘了，给前面浏览的朋友带来困扰了，今天我就来补充上）

{
  "usingComponents":{
    "zan-toast":"/dist/toast/index"
  }
}

第二步：编写wxml文件，代码如下：

<view class="box1" bindtap="showToast">toast 测试</view>
<zan-toast id="zan-toast-test"></zan-toast>

第三步：编写wxss文件，内容如下：

/* 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内容'
        });
  }

})

效果，如图所示：