小程序基础学习（插槽）

一，新建一个组件文件

二，设置插槽

三，微信小程序里面插槽没有默认值需要用wxss来设置，检查插槽这个标签是否为空，如果为空则默认值的view显示

四，写入页面

五，插槽代码

  
    
  
    默认值
  

// components/my-solt/my-slot.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

/* components/my-solt/my-slot.wxss */
.my-slot{
  margin: 20px 0;
}
.dis{
  display: none;
}
.content:empty + .dis{
  display: block;

}

{
  "component": true,
  "usingComponents": {}
}

六，页面代码

  
   牛马
   牛马
   
   牛马
   

// pages/six/six.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

/* pages/six/six.wxss */

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "my-slot":"/components/my-solt/my-slot"
  },
  "enablePullDownRefresh": true
}