给小程序组件创建slot
<!--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的更多相关文章
- 小程序组件化开发框架---wepy 项目创建
wepy是一个优秀的微信小程序组件化框架,突破了小程序的限制,支持了npm包加载以及组件化方案.这里就以我个人的经历讲下怎么创建wepy项目. 1.首先 在桌面(自己选定目录下)新建一个文件夹,注意需 ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 微信小程序-组件篇
一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...
- 小程序组件--> 组件传参
小程序组件,在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件 如果多个地方需要使用到,可以在app.json中加入一下代码,相 ...
- 小程序组件化框架 WePY 在性能调优上做出的探究
作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...
- WePY | 小程序组件化开发框架
资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...
- 小程序组件 scroll-view 滑动
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...
- 微信小程序组件化实践
Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...
- 小程序组件 scroll-view 横向滚动条无效
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过,并且换行了),经调试发现: 1.sc ...
随机推荐
- 用TCGA数据库分析癌症和癌旁组织的表达差异
上周收到一条求助信息:“如何用TCGA数据库分析LINC00152在卵巢癌与正常组织的的表达差异?” 所以以这个题目为记录分析过程如下: 一.下载数据 a)进入网站https://cancergeno ...
- 对于 yii2 高级模板 生成文件入口
安装的 advanced 模板web下是没有index.php 方法: 在advanced 目录下有个init.bat 应用程序 双击即可如下 查看advanced 目录 (刷新)如下 已有:
- iPhone的home键进果汁了,按起来粘粘的感觉
解决办法是按住home键转动一下,再用棉签蘸点水或者酒精都行(注意:水不要太多,不能让水渗进去),用棉签按压home 键多转几圈就好了.
- 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 ...
- 数据库(学习整理)----7--Oracle导入导出数据库文件
Oracle导入本地数据库操作手册 1.旧数据库忘记了密码,首先进入cmd:1)输入:sqlplus/nolog2)输入:connect/as sysdba3)输入:alter user sys id ...
- (转)ASP.NET基础之HttpHandler学习
原文地址:http://www.cnblogs.com/wujy/archive/2013/08/18/3266009.html 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP. ...
- LibreOJ 6283 数列分块入门 7(区间加区间乘区间求和)
题解:这道题要打一个乘标记一个加标记,两个标记的优先级是乘法高,所以在乘的时候要将加标记同时乘上一个c,当然,对于每个非完整块一定要记得暴力重构整个块,把加标记和乘标记都初始化. 代码如下: #inc ...
- 合成(Composite)模式
一. 合成(Composite)模式 合成模式有时又叫做部分-整体模式(Part-Whole).合成模式将对象组织到树结构中,可以用来描述整体与部分的关系. 合成模式可以使客户端将单纯元素与复合元素同 ...
- jQuery事件(持续更新中)
方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...
- subset子集全排序问题
思路一 可以用递推的思想,观察S=[], S =[1], S = [1, 2] 时解的变化. 可以发现S=[1, 2] 的解就是 把S = [1]的所有解末尾添上2,然后再并上S = [1]里面的原有 ...