uniapp：uni.createSelectorQuery函数结合vue的watch函数使用实例

提醒
本文实例是使用uniapp进行开发演示的。

一、需求场景

在开发详情页面时，不同产品描述文案不同，有的文案比较长，需求上要求描述文案最多展示4行文案，少于4行文案，全部显示，此UI高度自动适配，例如，只有一行文案，那么UI高度也是展示一行的高度，超过的部分文案不显示同时右边显示查看详情、查看更多或者展开等按钮，让用户点击此按钮进行查看。

二、需求分析

详情页面是通用的，显示描述的UI的高度是可变化的，最多是4行文案的高度；
实时监听描述文案的属性变化；
实时更新UI高度以及对应的UI样式；
需要知道什么时候DOM更新完成的；

三、技术方案

设置css属性：max-height: xxx; overflow: hidden;控制描述文案UI的最大高度和超过的文案隐藏起来；
使用vue的watch函数监听描述文案的属性变化；
使用uni.createSelectorQuery()获取节点信息（描述文案UI的高度）；
使用vue的nextTick()函数等待 DOM 更新完成。

四、技术知识点简介

4.1 vue的watch函数

用于声明在数据更改时调用的侦听回调。
watch 选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性 (例如，通过 data 或 computed 声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。

除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如 a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的 $watch() API。

值也可以是一个方法名称的字符串 (通过 methods 声明)，或包含额外选项的对象。当使用对象语法时，回调函数应被声明在 handler 中。额外的选项包含：

immediate：在侦听器创建时立即触发回调。第一次调用时，旧值将为 undefined。
deep：如果源是对象或数组，则强制深度遍历源，以便在深度变更时触发回调。详见深层侦听器。
flush：调整回调的刷新时机。详见回调的触发时机及 watchEffect()。
onTrack / onTrigger：调试侦听器的依赖关系。详见侦听器调试。

注意：声明侦听器回调时避免使用箭头函数，因为它们将无法通过 this 访问组件实例。

点击查看侦听器详情

4.2 uni.createSelectorQuery()

uni.createSelectorQuery()主要是获取节点信息。
返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

注意：

使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
默认需要使用到 selectorQuery.in 方法。
支付宝小程序不支持 in(component)，使用无效果

4.2.1 SelectorQuery

查询节点信息的对象

selectorQuery.in(component)

将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

js代码示例，选项式API

const query = uni.createSelectorQuery().in(this);
query.select("#id").boundingClientRect((data) => {console.log("得到布局位置信息" + JSON.stringify(data));console.log("节点离页面顶部的距离为" + data.top);}).exec();

注意： 支付宝小程序不支持 in(component)，使用无效果

4.2.2 selectorQuery.select(selector)

在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

selector 说明：

selector 类似于 CSS 的选择器，但仅支持下列语法。

ID 选择器：#the-id
class 选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant (H5 暂不支持)
多选择器的并集：#a-node, .some-other-nodes

4.3 vue的nextTick()函数

等待下一次 DOM 更新刷新的工具方法。

类型

function nextTick(callback?: () => void): Promise<void>

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

五、实例效果图

描述文案少于4行的UI效果图

描述文案超过4行，超过的文案隐藏UI效果图

描述文案全部显示UI效果图

实例效果图演示步骤如下：

首先进入描述文案少于4行的UI效果图
点击更新描述文案，将描述文案增多，即可看到描述文案超过4行，超过的文案隐藏UI效果图
点击查看详情按钮，即可查看完整的描述文案，同时查看详情按钮变成收起按钮，点击收起按钮即可隐藏超出的描述文案，这样也实现了展示全部描述文案和隐藏描述文案自由切换的功能，提升用户体验。

六、实例代码

testUniCreateSelectorQuery.vue文件代码

<template><view class="content-root"><view class="content-wrap"><text class="title">{{ obj.title }}</text><view id="desc" class="desc" :style="{ maxHeight: `${descViewHeight}rpx` }"><text>{{ obj.desc }}</text></view><view class="view-btn-wrap"><view class="view-btn" @click="updatDesc">更新描述文案</view><view class="view-btn" v-if="showDetailBtn" @click="showOrHiddenDesc">{{ showOrHiddenDescBtnText }}</view></view></view></view>
</template>
<script>
export default {data() {return {descViewHeight: 150,showOrHiddenDescBtnText: "查看详情",obj: {title: "1024程序员",desc: "1024程序员节（1024 Programmer's Day）是广大程序员的共同节日"},showDetailBtn: false,}},watch: {obj: {handler(newVal, oldVal) {console.log(`watch handler 回调 oldVal: ${oldVal} , newVal: ${newVal}`)this.trackObjDesc()},// 在侦听器创建时立即触发回调。第一次调用时，旧值将为 undefined。immediate: true,// 该回调将会在被侦听的对象的属性改变时调动，无论其被嵌套多深deep: true}},methods: {showOrHiddenDesc() {if (this.descViewHeight <= 150) {this.descViewHeight = 600this.showOrHiddenDescBtnText = "收起"return}this.descViewHeight = 150this.showOrHiddenDescBtnText = "查看详情"},// 更新desc内容updatDesc() {this.obj.desc = "1024程序员节（1024 Programmer's Day）是广大程序员的共同节日。1024是2的十次方，二进制计数的基本计量单位之一。针对程序员经常周末加班与工作日熬夜的情况，部分互联网机构倡议每年的10月24日为1024程序员节，在这一天建议程序员拒绝加班。\n 程序员就像是一个个1024，以最低调、踏实、核心的功能模块搭建起这个科技世界。1G=1024M，而1G与1级谐音，也有一级棒的意思。"},trackObjDesc() {let _this = this// nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成this.$nextTick(() => {// 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。// 默认需要使用到 selectorQuery.in 方法。const query = uni.createSelectorQuery().in(this);query.select("#desc").boundingClientRect(res => {const height = res.height_this.showDetailBtn = height > 75 ? true : falseconsole.log(`获取到 height = ${height} , _this.showDetailBtn = ${_this.showDetailBtn}`)}).exec();});}}
}
</script>
<style scoped>
.content-root {height: 100%;background-color: #ffffff;padding: 32rpx;
}.content-wrap {background-color: #ffffff;
}.title {color: #000;font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: bold;
}.desc {/* max-height: 150rpx; */overflow: hidden;color: #000;font-size: 24rpx;padding: 16rpx;background-color: #f5f5f5;/*  text 组件包含了长文本，可以考虑增加 user-select 属性，方便用户复制。 */-webkit-user-select: text;/* Safari */-moz-user-select: text;/* Firefox */-ms-user-select: text;/* IE 10+ */user-select: text;/* Standard syntax */
}.view-btn-wrap {display: flex;flex-direction: row;justify-content: space-between;
}.view-btn {width: 200rpx;height: 80rpx;margin-top: 40rpx;line-height: 80rpx;align-items: center;text-align: center;border-radius: 8rpx;color: #000;font-size: 28rpx;background-color: #eeeeee;
}
</style>