微信小程序自定義組件，提示組件

微信小程序自定義組件，這里列舉了一個常用的提示自定義組件，調用自定義組件中的方法和字段。僅供參考和學習。

編寫組件：

在根目錄下添加“components”目錄，然后像添加Page頁面一樣添加自定義組件"tips"

文件結構跟page一樣，有自己的js邏輯，json配置文件，標簽wxml，樣式文件wxss。這里使用的是weui的樣式庫。

tips.wxml：

<view class="weui-toptips weui-toptips_warn"  hidden="{{showTopTips}}">{{msg}}</view>

tips.js

// components/tips/tips.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {
    showTopTips: true,
    msg: '提示'
  },

  /**
   * 組件的方法列表
   */
  methods: {
    showDialog(msg) {
      wx.showModal({
        title: '提示',
        content: msg,
      })
    },
    showTopTip: function(msg) {
      let that = this;
      that.setData({
        showTopTips: false,
        msg: msg
      });
      setTimeout(function() {
        that.setData({
          showTopTips: true
        });
      }, 1500);
    }
  }
})

tips.wxss

/* components/tips/tips.wxss */

/*在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器。*/

.inner {
  color: red;
}

.weui-toptips_warn {
  background-color: #e64340;
}

.weui-toptips {
  position: fixed;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  z-index: 5000;
  word-wrap: break-word;
  word-break: break-all;
}

下面做一個測試頁調用

/pages/test頁進行測試

1、首先test.json配置中引用tips自定義組件：

{
  "usingComponents": {
    "mytips": "/components/tips/tips",
    "dialog": "/components/dialog/dialog"
  }
}

2、test.wxml 中添加自定義組件標簽

<mytips id='mytips'></mytips>
<view class='container'>
 <button type='primary' size='default' bindtap='showTip'>提示</button>
</view>

3、test.js 調用自定義組件中的方法和字段賦值

// pages/test/test.js
var tips ;
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    com_data:'',
    showTopTips:false,
    msg:'' 
},
 
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
      com_data:'test 設置屬性值'
    })
  },

 
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    //獲得mytips組件
    tips = this.selectComponent("#mytips")
    //獲得dialog組件
    //this.dialog = this.selectComponent("#dialog");
  },
  showTip: function () {
    //tips.showDialog('jbbbbbbbb');
    //return
    tips.showTopTip('提示內容。。。');

  },
  showDialog() {
    this.dialog.showDialog('顯示的內容');
  },

  //取消事件
  _cancelEvent() {
    console.log('你點擊了取消');
    this.dialog.hideDialog();
  },
  //確認事件
  _confirmEvent() {
    console.log('你點擊了確定');
    this.dialog.hideDialog();
  }
})

 

到此自定義組件的定義和使用已經告一段落。

效果顯示：在頁面頂端顯示提示內容。