0608 微信小程序 (button组件 + 事件 及变量传递,icon组件)

1.button组件 是一个按钮组件

<button  type="type" size="size" color="color"  bindtap="点击后执行的方法名(需要写在当前页对应的js文件中)  data-hi="50" > 按钮字样</button>  //data-hi 为自定义交互变量,对其设置了一个50的变量

button包含属性较多.主要的说两个

1.1 type:按钮样式  default /   warn/  primary  (默认/红色警告/绿色主按钮)

1.2 size:尺寸    default/mini  (默认或最小,默认会满屏幕宽度)

1.3 disabled  true/false   是否禁用当前按钮

button属性较多,详情移步

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2.就着button说一下事件

本利事件说明:在任何组件可以绑定事件,本组件说明时至是打个比方

组件绑定事件的方式    为标签描述中增加    bindtap="zhixing"     //"zhixin为当前点击后要执行的方法名"

在当前页的js文件中增加如下代码

zhixing:function(e){ //e为当前所点击组件对象,e对象自带了组件全部信息在里面,可以传递到当前方法中做爱做的调用

//以下三行为读取交互变量值

console.log(e.currentTarget.(所包含属性))   //即可调用

console.log(e.(所包含属性)    //读取全部信息   或指定属性值

console.log(e.currentTarget.dataset.hi   //读取当前组件的dataset属性下一个叫hi的自定义属性值

//以下为改变和设置交互变量值的步骤

首用parmar对象进行值的修改: parmar.data.zhi ="123"       //zhi为在当前页的data里面定义的页面绑定变量,此时修改后只是内存修改,页面并不会同步刷新绑定值变化

然后用setData方法见刷新:     this.setData(parmar.data)    //setData方法执行后,即可进行显示刷新

}

 3 ico组件:该组件可以调用微信系统自带的9个图标样式.该组件自带三个属性,属性值配置如下

3.1  type :为按钮样式,只能是这些:"

"‘success‘, ‘success_no_circle‘, ‘info‘, ‘warn‘, ‘waiting‘, ‘cancel‘, ‘download‘, ‘search‘, ‘clear‘

3.2  size:可以设置图标大小:只能是数值

3.3 color:为图标颜色 可以为css描述方式标记颜色如"red","yellow"等,或者是"reb(255,255,255)"来表示,替换图标颜色

原文地址:https://www.cnblogs.com/xfym888/p/9157945.html

时间: 2024-10-08 12:07:55

0608 微信小程序 (button组件 + 事件 及变量传递,icon组件)的相关文章

微信小程序把玩(二十四)toast组件

原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--t

微信小程序把玩(二十八)image组件

原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式 九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. asp

微信小程序 发现之旅(二)—— 自定义组件

组件化的项目开发中,组件应当划分为三个层次:组件.模块.页面 微信小程序已经为开发者封装好了基础组件,页面文件(pages)也有了详细的规定 而模块就需要自行开发,并且要和页面文件区分开,这就涉及到自定义组件 一.基本用法 在根目录下创建一个 components 目录,用于存放自定义组件 组件也是由 json.wxml.wxss.js 四个文件组成 其中 wxml 部分没有什么特殊的地方,和页面的写法一致 wxss 也是只对组件生效,而且 app.wxss 中的样式也不会对自定义组件生效 最关

微信小程序 button 组件

button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默认的 mini 小尺寸 type: 类型 字符串 按钮的样式类型 属性值:default 默认的 primary 绿色的 warn 红色的 plain: 类型 布尔 按钮是否镂空,背景色透明 disabled: 类型 布尔 是否禁用 loading:   类型 布尔 名称前是否带有 加载 的图标 f

第九篇、微信小程序-button组件

主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的button, 默认大小default,默认加载false,默认按键不为镂空,默认可以点击,点击有效果hover-class="other-button-hover"--> <button type="default" size="{{defaultSi

微信小程序——button, swiper等默认样式更改

微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式,做一下汇总,不定期更新: 1.button的背景色,边框,圆角: button{ background-color: transparent; } button::after { border: 0; border-radius:0 } 2.swiper 的点的位置: .wx-swiper-dots

微信小程序button去除默认样式

button { font-size: 28rpx; background-color: #fff; border: none; padding: 0; margin: 0; line-height: 1; } input { outline: none; border: none; list-style: none; } button::after { border: none; } button为覆盖的样式 原文地址:https://www.cnblogs.com/jjmirai/p/959

微信小程序-点击事件传递参数

首先 bindtap 绑定点击事件, 在标签中利用 data-xxx  来定义你要传入的参数,, 然后事件中传入 event 用 event.currentTarget.dataset.xxx 来取你传入的值 原文地址:https://www.cnblogs.com/listen9436/p/11113449.html

微信小程序~触摸相关事件(拖拽操作、手势识别、多点触控)

touchstart     手指触摸动作开始 touchmove    手指触摸后移动 touchcancel  手指触摸动作被打断,如来电提醒,弹窗 touchend      手指触摸动作结束 拖拽操作案例1: 注意按钮拖出屏幕边缘处理 <view id="id" bindtouchmove="handletouchmove" class='demo' style='top:{{ballTop}}px; left: {{ballLeft}}px'>