内置属性

属性	类型	说明
class	String	自定义样式类，WXSS 控制外观
style	String	行内样式，优先级高于 class
id	String	组件唯一标识，wx.createSelectorQuery 获取节点
hidden	Boolean	是否隐藏，`hidden="{{true}}"` 不渲染占位
hover-class	String	点击时的按压样式类
hover-stop-propagation	Boolean	阻止按压样式向父 view 冒泡
hover-start-time	Number	按住多久后出现按压样式，单位ms，默认50
hover-stay-time	Number	松开后按压样式保留时间，单位ms，默认400
catch/tap/bind 系列事件	-	点击、触摸、滑动等交互事件

class 类样式（推荐）

相当于 HTML 的 class类样式，统一写在 wxss，复用样式

<!-- 静态class -->
<view class="card">卡片</view>

hover 点击按压效果

高频使用，基础按压样式

<view hover-class="active">点击我有变色效果</view>

.active {
  background: #eee;
  opacity: 0.7;
}

控制按压时机、阻止冒泡

<!-- 200ms后触发按压，松开停留600ms，不传递给父容器 -->
<view 
  hover-class="active"
  hover-start-time="200"
  hover-stay-time="600"
  hover-stop-propagation
>
  防冒泡点击盒子
</view>

hidden 隐藏元素

区别 display:none：hidden 只是不可见，DOM 节点仍存在，占页面布局空间

<view hidden="{{isHide}}">隐藏内容</view>

Page({
  data: { isHide: true } // true隐藏，false显示
})

事件绑定

1. bindtap 点击（冒泡，会传递给父view）

<view bindtap="handleClick" data-id="100">点击</view>

Page({
  handleClick(e) {
    // 获取自定义参数 data-id
    console.log(e.currentTarget.dataset.id) // 100
  }
})

2. catchtap 点击（阻止冒泡，推荐弹窗、按钮）

父容器也绑定点击时，子用 catchtap 不会触发父事件

<view bindtap="parentTap">
  父盒子
  <view catchtap="childTap">子按钮（不触发父）</view>
</view>

3. 长按 bindlongpress

<view bindlongpress="longTap">长按我</view>

4. 触摸系列（touchstart/touchmove/touchend）

拖拽、滑动场景使用

<view bindtouchmove="move">拖动</view>

5. 传参两种方式

data-xxx 自定义参数（通用）

<view bindtap="tap" data-name="小明" data-age="18"></view>

模板插值直接传（简单参数）

<view bindtap="tap({{10}})"></view>

tap(num) { console.log(num) }

获取 view 节点信息

通过 id 获取 view 的宽高、位置、滚动距离

<view id="target" class="box"></view>

onReady() {
  const query = this.createSelectorQuery()
  query.select('#target').boundingClientRect(res => {
    console.log('宽', res.width)
    console.log('高', res.height)
    console.log('距离顶部', res.top)
  }).exec()
}

原文出处：/show_1GW3XL5XQmnj.html