<!--comviewonents/juan/juan.wxml-->
<view class="model-wrapper" hidden="{{visible}}">
<view class="mask" bindtap="setVisible"></view>
<view class="model-content">
<view class="delete" bindtap="setVisible">
<i class="icon-close">X</i>
</view>
<view class="title" wx:if="{{titleInfo}}">{{titleInfo}}</view>
<slot name="reference"></slot>
<view class="button-group" wx:if="{{leftButton || rightButton}}">
<view class="button-item" wx:if="{{leftButton}}" bindtap="left_button_click">{{leftButton}}
</view>
<view class="button-item black" wx:if="{{rightButton}}" bindtap="right_button_click">{{rightButton}}
</view>
</view>
</view>
</view>
// components/juan/juan.js
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
titleInfo:{
type:String,
value:'ddd'
},
leftButton:{
type:String,
value:'取消'
},
rightButton:{
type:String,
value:'确认'
}
}, /**
* 组件的初始数据
*/
data: {
visible:false,
}, /**
* 组件的方法列表
*/
methods: {
setVisible(){
this.setData({
visible:true,
})
},
left_button_click(){ },
right_button_click(){ }
}
})

页面中引用组件:

<!--pages/juan/juan.wxml-->
<juan id="juan">
<view class="f-coupon-wrapper" slot="reference">
<view class="coupon-content-wrapper">
<image src="../../image/log.png" width="100%" alt="优惠券"></image>
</view>
</view>
</juan>

但是需要注意的是,小程序slot渲染后的位置和slot处于wxml中的位置不一致。官方仍未解决

给小程序组件创建slot的更多相关文章

  1. 小程序组件化开发框架---wepy 项目创建

    wepy是一个优秀的微信小程序组件化框架,突破了小程序的限制,支持了npm包加载以及组件化方案.这里就以我个人的经历讲下怎么创建wepy项目. 1.首先 在桌面(自己选定目录下)新建一个文件夹,注意需 ...

  2. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  3. 微信小程序-组件篇

    一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...

  4. 小程序组件--> 组件传参

    小程序组件,在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件 如果多个地方需要使用到,可以在app.json中加入一下代码,相 ...

  5. 小程序组件化框架 WePY 在性能调优上做出的探究

    作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...

  6. WePY | 小程序组件化开发框架

    资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...

  7. 小程序组件 scroll-view 滑动

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  8. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  9. 小程序组件 scroll-view 横向滚动条无效

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过,并且换行了),经调试发现: 1.sc ...

随机推荐

  1. Docker学习笔记_创建和使用Centos容器

    实验:创建和使用Centos容器 步骤: 1.搜索                                                     sudo docker search cen ...

  2. Java方法学习疑问

    此方法不理解 finalize() 方法 Java允许定义这样的方法,它在对象被垃圾收集器析构(回收)之前调用,这个方法叫做finalize( ),它用来清除回收对象. 例如,你可以使用finaliz ...

  3. sklearn scoring . xgboost.train . ---> rsme

    http://scikit-learn.org/stable/modules/model_evaluation.html#scoring-parameter 3.3.1. The scoring pa ...

  4. 如何在Django模型中管理并发性 orm select_for_update

    如何在Django模型中管理并发性 为单用户服务的桌面系统的日子已经过去了 - 网络应用程序现在正在为数百万用户提供服务,许多用户出现了广泛的新问题 - 并发问题. 在本文中,我将介绍在Django模 ...

  5. 符合mvc思维的分页思想

    .Model Student.cs namespace WebApplication14.Models { public class Student { public int Id { get; se ...

  6. Entity Framework 6.0 Tutorials(6):Transaction support

    Transaction support: Entity Framework by default wraps Insert, Update or Delete operation in a trans ...

  7. iOS CocoaPods安装与使用 好东西保存

    http://www.cnblogs.com/daguo/p/4097263.html http://www.cnblogs.com/pican/p/3939941.html?utm_source=t ...

  8. Dijstra算法-------为了纪念,等以后看的时候方便

    杭电problem2066 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total ...

  9. xmlreader与xmlwriter里的几个坑与解决方案

    加载超过100M的xml文件时(可能不是很常见),XmlDocument这种全部加载到内存里的模式就有点不友好了,耗时长.内存高. 这时用xmlreader就会有自行车换超跑的感觉,但其间遇到几个坑, ...

  10. SQL 全角半角转换-(摘抄)

    /****** SQL转换全角/半角函数 开始******/ CREATE FUNCTION ConvertWordAngle ( @str NVARCHAR(4000), --要转换的字符串 @fl ...