小程序基础学习（插槽）_微信小程序插槽

一，新建一个组件文件

二，设置插槽

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

四，写入页面

五，插槽代码

<!--components/my-solt/my-slot.wxml-->
<view class="my-slot">
  <view class="content">
    <slot ></slot>
  </view>
    <view class="dis">默认值</view>
  
</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.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view>
  <view>
   <my-slot  class="my-slot"><button>牛马</button></my-slot>
   <my-slot class="my-slot">牛马</my-slot>
   <my-slot  class="my-slot"></my-slot>
   <my-slot  class="my-slot"><button>牛马</button></my-slot>
  </view> 
</view>

// 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
}