时间:2021-05-18
在写小程序代码的时候,我们发现经常有一段代码我们经常敲,经常使用某一自定义组件,例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码;微信小程序里的弹窗提示可以使用在多个地方…
小程序自定义组件
找到components目录,没有就新建
在compoents目录里新建一个用于存放代码的目录(下面用g-swiper表示)
在g-swiper目录里新建Compoent(名字自取),新建后会和新建Page时一样自动生成四个页面文件(g-swiper.wxml g-swiper.wxss g-swiper.js g-swiper.json)
轮播图实例
<g-swiper list="{{imageList}}" g-class="swiper"/>在index.wxml里只需要这简短一行代码就能实现一个轮播图组件
json声明
要想使用组件必先声明,在index.json里声明组件名称和地址
{ "usingComponents": { "g-swiper":"/components/g-swiper/g-swiper" }}在组件的json也必须的声明,g-swiper.json(下面代码直接复制报错请将注释删掉)
{ "component": true, // 自定义组件声明 "usingComponents": {} // 可选项,用于引用别的组件}wxml和wxss
wxml和wxss里的代码跟普通页面里的代码没什么区别
g-swiper.wxml代码
<swiper class="g-class" circular autoplay interval='3000' duration='300' indicator-dots indicator-active-color='#fffff'> <block wx:for="{{list}}" wx:key="{{index}}"> <swiper-item class="swiper-item"> <image src="{{item}}"/> </swiper-item> </block></swiper>g-swiper.wxss代码
.swiper-item image{ width:100%; height:100%}js
js代码和普通页面js代码有所不同,这里是用Component包起来的而不是被Page包起来的
js代码
Component({ externalClasses:["g-class"], properties: { list:{ type:Array, value:[] } },})注意:这里的g-class样式和list数据我将它的定义权利交给引入它的一方,这里是index页面引入它
组件绑定外部方法
组件绑定外部方法的方式,以一自定义button为例
g-btn.wxml代码
<button bindtap="btnTest">g-btn</button>g-btn.js代码
Component({ methods: { /* * 公有方法 */ btnTest:function(){ this.triggerEvent('action') } }})在index里引入并且展示出来
index.wxml代码
<g-btn bind:action="btnTest"></g-btn>在index.js里加入方法btnTest()
btnTest:function(){ console.log('g-btn is clicked now!')}可以看到Console栏里出现了“g-btn is clicked now!”字样
弹窗组件实例
index页面引入,直接上代码
index.wxml代码
<view class="container"> <dialog id='dialog' title='这是标题' content='这是对话框的内容' cancelText='取消' confirmText='确定' bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"> </dialog> <button type="primary" bindtap="showDialog"> ClickMe! </button></view>index.js代码
Page({ onReady: function () { //获得dialog组件 this.dialog = this.selectComponent("#dialog"); }, showDialog() { this.dialog.showDialog(); }, //取消事件 _cancelEvent() { console.log('你点击了取消'); this.dialog.hideDialog(); }, //确认事件 _confirmEvent() { console.log('你点击了确定'); this.dialog.hideDialog(); }})组件dialog目录里
dialog.wxml代码
<view class='wx_dialog_container' hidden="{{!isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> <view class='wx-dialog-title'>{{ title }}</view> <view class='wx-dialog-content'>{{ content }}</view> <view class='wx-dialog-footer'> <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view> <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view> </view> </view></view>dialog.wxss代码
.wx-mask{position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.3);}.wx-dialog{position: fixed;z-index: 5000;width: 80%;max-width: 600rpx;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: #FFFFFF;text-align: center;border-radius: 3px;overflow: hidden;}.wx-dialog-title{font-size: 18px;padding: 15px 15px 5px;}.wx-dialog-content{padding: 15px 15px 5px;min-height: 40px;font-size: 16px;line-height: 1.3;word-wrap: break-word;word-break: break-all;color: #999999;}.wx-dialog-footer{display: flex;align-items: center;position: relative;line-height: 45px;font-size: 17px;}.wx-dialog-footer::before{content: '';position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}.wx-dialog-btn{display: block;-webkit-flex: 1;flex: 1;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);position: relative;}.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){color: #353535;}.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){color: #3CC51F;}.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{content: " ";position: absolute;left: 0;top: 0;width: 1px;bottom: 0;border-left: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}dialog.js代码
Component({ /** * 组件的属性列表 * 用于组件自定义设置 */ properties: { // 弹窗标题 title: { // 属性名 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个 }, // 弹窗内容 content: { type: String, value: '弹窗内容' }, // 弹窗取消按钮文字 cancelText: { type: String, value: '取消' }, // 弹窗确认按钮文字 confirmText: { type: String, value: '确定' } }, /** * 私有数据,组件的初始数据 * 可用于模版渲染 */ data: { // 弹窗显示控制 isShow: false }, /** * 组件的方法列表 * 更新属性和数据的方法与更新页面数据的方法类似 */ methods: { /* * 公有方法 */ //隐藏弹框 hideDialog() { this.setData({ isShow: !this.data.isShow }) }, //展示弹框 showDialog() { this.setData({ isShow: !this.data.isShow }) }, /* * 内部私有方法建议以下划线开头 * triggerEvent 用于触发事件 */ _cancelEvent() { //触发取消回调 this.triggerEvent("cancelEvent") }, _confirmEvent() { //触发成功回调 this.triggerEvent("confirmEvent"); } }})总结
以上所述是小编给大家介绍的微信小程序自定义组件components,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考,具体如下:怎么创建就不说了,前面一篇有微信小程序自定义prompt组件直接上代码wxm
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限
微信小程序自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家。微信小程序自定义创建自定义创建与默认创建完全相同,只
1.自定义提示框组件src/components/Toast/index.js/***自定义提示框(Toast)组件*/varToast={};varshowT
本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果