• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序的插槽以及button分享、授权样式改变的应用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

插槽:插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

关键点: 子组件决定在哪显示   父组件决定组件长啥样并且显示不显示

小程序插槽的使用:

1、在子组件指定位置定义solt组件标签

<view>
  <text>我是标准的</text>
  <!--下面是slot插槽(占位),用于承载组件引用时提供的子节点-->
  <slot></slot>
</view>

2、在json文件中引入子组件

{
  "usingComponents": {
    "v-tag": "/components/tag/index",
}

3、启用插槽(这个容易忘记,一定要启用插槽才能生效)

Component({
  // 在子组件js的Component中开启插槽
  options: {
    multipleSlots: true
  }
})

 

4、在父组件中定义组件的内容

<v-tag>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>我是定制的内容</view>
</v-tag>

注:如上,父组件或者页面的内容包括样式就应用到子组件中并显示

  如果是多个组件的话,可以在子组件的插槽中命名,这样在父组件中同样根据插槽的名称定义插入的内容

<view>
 <text>我是标准的</text>
 <!--下面是slot插槽(占位),用于承载组件引用时提供的子节点-->
 <slot name="custom1"></slot>
 <slot name="custom2"></slot>
</view>
<f-music>
<view slot="custom2">我是定制的内容2</view>
</f-music>
<f-music>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view slot="custom1">我是定制的内容1</view>
  <view slot="custom2">我是定制的内容2</view>
</f-music>

 

改变button的样式

小程序的button除了承担button按钮简单的功能外,在分享、授权的时候,小程序是必须使用button组件,用户点击该组件触发分享、授权等操作,但是button是一个按钮,作为分享组件样式并不合适。为解决这样一个问题,我们可以封装一个组件,来定义不同的功能,父组件传递不同的内容进去。如下图,分享和授权的按钮需要实现如下的样子:

 

 

 

 

 

 类似于这样的一些button,我们可以封装在一个组件中,在父组件中只需要传递不同样式图片就可以达到上面的效果,具体如下

1、在components下面新建一个button-image的文件夹,存放组件

2、在wxml中定义button组件,定义插槽,定义button类型(open-type)这个需要从父组件中传递进来具体的类型,getuserinfo代表获取用户的信息

<button bind:getuserinfo="onGetUserInfo" 
    open-type='{{openType}}'  plain='{{true}}'
     class="container">
  <slot name="img"></slot>
</button>

3、在js文件中开启插槽、将自定义的onGetUserInfo方法激活,传给父组件

// 开启插槽
options: {
    multipleSlots: true
}

// 激活方法
methods: {
    onGetUserInfo(event) {
      this.triggerEvent('getuserinfo', event.detail, {})
    }
  }

4、使用组件  在需要引入页面的json文件中引入子组件

{
  "usingComponents": {
    "v-button": "/components/image-button/index"
  }
}

5、在页面指定位置使用子组件

<view class='header'>
    <v-epsoide class="epsoide" index="{{classicData.index}}" />
    <view class="like-container">
      <v-like class="like" bind:like="onLike" like="{{likeStatus}}" count="{{likeCount}}" />
<!--使用子组件,传入组件类型已经插槽的内容-->
      <v-button class="share-btn" open-type="share">
        <image class="share" slot="img" src="/images/icon/share.png" />
      </v-button>      
    </view>
  </view>

授权组件类似

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap