<!--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. 用TCGA数据库分析癌症和癌旁组织的表达差异

    上周收到一条求助信息:“如何用TCGA数据库分析LINC00152在卵巢癌与正常组织的的表达差异?” 所以以这个题目为记录分析过程如下: 一.下载数据 a)进入网站https://cancergeno ...

  2. 对于 yii2 高级模板 生成文件入口

    安装的 advanced 模板web下是没有index.php 方法: 在advanced 目录下有个init.bat 应用程序  双击即可如下 查看advanced 目录 (刷新)如下 已有:

  3. iPhone的home键进果汁了,按起来粘粘的感觉

    解决办法是按住home键转动一下,再用棉签蘸点水或者酒精都行(注意:水不要太多,不能让水渗进去),用棉签按压home 键多转几圈就好了.

  4. Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites

    Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites By Tom FitzMacken|February 17, 20 ...

  5. 数据库(学习整理)----7--Oracle导入导出数据库文件

    Oracle导入本地数据库操作手册 1.旧数据库忘记了密码,首先进入cmd:1)输入:sqlplus/nolog2)输入:connect/as sysdba3)输入:alter user sys id ...

  6. (转)ASP.NET基础之HttpHandler学习

    原文地址:http://www.cnblogs.com/wujy/archive/2013/08/18/3266009.html 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP. ...

  7. LibreOJ 6283 数列分块入门 7(区间加区间乘区间求和)

    题解:这道题要打一个乘标记一个加标记,两个标记的优先级是乘法高,所以在乘的时候要将加标记同时乘上一个c,当然,对于每个非完整块一定要记得暴力重构整个块,把加标记和乘标记都初始化. 代码如下: #inc ...

  8. 合成(Composite)模式

    一. 合成(Composite)模式 合成模式有时又叫做部分-整体模式(Part-Whole).合成模式将对象组织到树结构中,可以用来描述整体与部分的关系. 合成模式可以使客户端将单纯元素与复合元素同 ...

  9. jQuery事件(持续更新中)

    方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...

  10. subset子集全排序问题

    思路一 可以用递推的思想,观察S=[], S =[1], S = [1, 2] 时解的变化. 可以发现S=[1, 2] 的解就是 把S = [1]的所有解末尾添上2,然后再并上S = [1]里面的原有 ...