探秘小程序(7):view组件

小程序中最基础,最常用的组件--view,类似于html中div的存在有四个属性:

①hover-class:指定按下去的样式类。当 hover-class="none" 时,没有点击态效果

实例:

 <view hover-class=‘red‘ class=‘view‘ >hover可不是鼠标滑过哦</view>
.red{
  color: red;
}

②hover-stop-propagation:阻止事件冒泡,指定是否阻止本节点的祖先节点出现点击态,遗憾的发现无论指定值为true或者false,或者0 或者 -1,亦或是什么都不指定 ,只要出现hover-stop-propagation他就阻止冒泡了。

实例:

<view hover-class=‘bg_black‘>
<view>另一部分内容</view>
<view hover-stop-propagation="true" hover-class=‘yellow‘>hover-stop-propagation了解</view>
</view>

③hover-start-time:按住后多久出现点击态,单位毫秒

实例:

 <view hover-start-time=‘1000‘ hover-class=‘red‘>一秒后出状态</view> 

④hover-stay-time:手指松开后点击态保留时间,单位毫秒

实例:

 <view hover-stay-time="3000" hover-class=‘red‘>我能点亮三秒钟</view>

原文地址:https://www.cnblogs.com/codeww/p/9043589.html

时间: 2024-11-09 14:43:15

探秘小程序(7):view组件的相关文章

小程序聊天会话组件

效果图 场景 用于在线客服的聊天对话等 一.布局圈点 1.三角箭头 绘制一个26rpx*26rpx矩形,使它旋转45度,然后隐去对半,形成气泡上的直角三角形. <!-- 画三角箭头 --> <view class="triangle" style="{{item.myself == 1 ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view> /* 三角

小程序解决方案 Westore - 组件、纯组件、插件开发

数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流. Github: https://github.com/dntzhang/westore 组件 这里说的组件便是自定义组件,使用原生小程序的开发格式如下: Component({ properties: { }, data: { }, methods: { } }) 使用 Wes

微信小程序_基础组件大全

微信小程序_基础组件 微信小程序为小程序开发者提供了一系列小程序基础组件,开发者可以通过组合这些小程序基础组件进行微信小程序的快速开发. 微信小程序组件是什么?微信小程序组件怎么用? 小程序组件是视图层的基本组成单元.小程序组件自带一些功能与微信风格的样式.一个小程序组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property="value"> Content goes here ... </tagename>

「小程序JAVA实战」小程序的基础组件(24)

转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/wxProgram.git 中的No.11 基础组件 icon图标组件 rich-text 富文本组件 text 文本组件 progress 进度条组件 icon图标组件 官方介绍>https://developers.weixin.qq.com/miniprogram/dev/component/

微信小程序导入Vant-Weapp组件库及出错处理

微信小程序导入Vant-Weapp组件库及出错处理一.下载Node.js*链接:https://nodejs.org/en/推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本 二.在微信开发工具做对应操作 链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作 三.安装Vant组件库选中miniprogram文件,右

微信小程序简易table组件实现

前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页面引用时,无需通过import,只需在该页面json文件下配置usingComponents属性即可.(原本想在app.json文件里配置这个属性,从此一劳永逸,但目前貌似还不支持,至少我尝试的时候还不行-.-) 思路:主要是将table的head和tbody部分的数据抽象出来,使之只需要传值就可直

小程序canvas截图组件

最近做一个小程序的过程中,需要用到截图功能,网上搜了一下,发现没有符合要求的,就自己搞了个组件,方便复用. 目前功能很简单,传入宽高和图片路径即可,宽高是为了计算截图的比例,只支持缩放和移动. 实现思路是: 1.模拟一个截取框:2.移动图片位置,缩放图片:3.获取图片在其中的位置(left,top,width,height):4.使用canvas绘制图片,然后截取就ok了. 其中第二步的缩放图片比较麻烦,缩放中心点以及平滑缩放 以下是我的实现方式 wxml: <!--component/picP

微信小程序——自定义图标组件

字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 index.wxml: <view class="custom-class ss-font ss-icon-{{ name }}" style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size

小程序中父子组件间的通信与事件

点此查看微信小程序官方文档 以下示例,可自行体会.. 子 - Component  child.json { "component": true, "usingComponents": {} } child.wxml <view class='template-child'> <block wx:for='{{dataFromParent}}'> <button data-id='{{item.id}}' bindtap='onTapC