推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
小程序组件实现
发布时间:2020-11-17
最近在做小程序项目，由于是多人开发，首先要考虑项目组件的实现，俗话说的好：“项目未动，组件先行”~
组件我用的是小程序的template，先上项目的目录架构
form-action-sheet组件wxml代码
<template name="form-action-sheet"> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange"> <block wx:for="{{actionSheetItems}}"> <action-sheet-item bindtap="itemChange" class="item" data-id="{{item.id}}"> {{item.name}} </action-sheet-item> </block> <action-sheet-cancel class="cancel">取消</action-sheet-cancel> </action-sheet> </template>在具体页面引用：
import引入template资源
<import src=http://www.yiyongtong.com/archives/"../../compoent/form-action-sheet/form-action-sheet.wxml" />调用template并传入数据
<view bindtap="showHideActionSheet"> <template is="form-select-default" data="{{...permis}}"/> </view>permis数据必须在data上声明：
permis: { title: '权限设置', name: '所有人可见', icon: '../../img/p.png', },绑定事件actionSheetChange：
showHideActionSheet: function() { wx.showActionSheet({ itemList: params, success: function(res) { success(res); }, fail: function(res) { fail(res); } }) }这里遇到巨坑的问题是，事件不能以变量的形式传入template，即如果需要在template上绑定如bindtap事件的话，事件名不能从具体调用页面中传入变量
上面代码中要给bindchange事件传一个函数的话只能传具体函数名，不能传入变量。。。
也就是说以template实现的组件需要绑定事件
要么把事件实现放在具体调用页面中通过外围包裹一个view元素传入事件
也就是
<view bindtap="showHideActionSheet"> <template is="form-select-default" data="{{...permis}}"/> </view>要么就在template里面写死，这种组件在调用页面中只能用一次，不然多个组件只能共用一个事件。
- 上一篇：钉钉Weex微应用与微信小程序对比表格
- 下一篇：小程序SDK简介
