uniApp -- 学习笔记(vue3+ts)

这篇具有很好参考价值的文章主要介绍了uniApp -- 学习笔记(vue3+ts)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.关于界面节点信息 6月15

uniApp官网介绍

(一) 个人理解是官网返回一个 SelectorQuery 对象实例。 并且可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。但是关于这个需要到查询信息,只有打印出来

uniApp -- 学习笔记(vue3+ts)

在onReady 调用 let selectorQuery: UniNamespace.SelectorQuery = uni.createSelectorQuery();返回到上图结果,但是我还是不理解这是什么。如果按照官网来说返回了一个SelectorQuery 的查询对象选择器出来。

不过这个有几点需要注意–使用uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用,也就是dom树完成之后。


(二)那么在拿到这个SelectorQuery之后他给了一些方法和示例:

   interface SelectorQuery {
        /**
         * 将选择器的选取范围更改为自定义组件component内默认本页
         */
        in(component: any): SelectorQuery;
        /**
         * 在当前页面下选择第一个匹配选择器selector的节点
         */
        select(selector: string): NodesRef;
        /**
         * 在当前页面下选择匹配选择器selector的所有节点
         */
        selectAll(selector: string): NodesRef;
        /**
         * 选择显示区域
         */
        selectViewport(): NodesRef;
        /**
         * 执行所有的请求
         */
        exec(callback?: (result: any) => void): NodesRef;
    }

这四个方法并给予了一些注释

  1. 将选择器的选取范围更改为自定义组件 component 内,返回一个 SelectorQuery 对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点支付宝小程序不支持in(component),使用无效果。并给予了示例
const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();
  1. 在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息支持下列语法。

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

  1. 在当前页面下选择匹配选择器 selector 的所有节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。
  2. 选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 NodesRef 对象实例。
  3. 执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。

这是官网给的说法,听起来云里雾里的,但是可以拿到几个关键信息。拿到选择器,获取一定程度组件的,或者是整个页面的部分或者区域的选择器,提供了上述的几个方法。

(三)我需要的是了解这几个方法的作用,这一个栏目,是uni选择器的了解,和构想一下使用场景的需求,其实从文档中可以得到的信息这几个方法的重载,选择一个节点,选择一个类的所有节点选择某个区域,调用exec 方法进行请求,那么了解了他的处理方式后面就好处理了,起一个测试
uniApp -- 学习笔记(vue3+ts)

uniApp -- 学习笔记(vue3+ts)

uniApp -- 学习笔记(vue3+ts)

可以拿到对应的节点坐标信息 left":0,"right":8.40625,"top":119,"bottom":139,"width":8.40625,"height":20

其实主要就是拿到这个数据,那么后面就比较理解了,比如selectAll 就是获取只要class 或者 id 所有的节点信息,数据为数组的节点位置信息。那么可以对这个数据做一些处理。文章来源地址https://www.toymoban.com/news/detail-494520.html

到了这里,关于uniApp -- 学习笔记(vue3+ts)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+TS版本Uniapp:封装uni.request请求配置

    作者: 前端小王hs 阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主 uniapp 的封装逻辑不同于 Vue3 项目中直接使用 axios.create() 方法创建实例(在 create 方法中写入请求的地址、请求头、超时等内容),代码如下: PS:上述代码来自博主在B站的

    2024年04月22日
    浏览(38)
  • vue3+ts+vite 搭建uniapp项目(微信小程序)

    模板下载: uniapp 官网通过vue-cli 命令行创建uniapp,参考uni-app官网,使用  npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 下载模板; 安装css预处理 sass: 项目终端输入: yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass (模板没有默认安装sass, 如果不安装直接使用会报错)  安装uni-ui组件

    2024年02月09日
    浏览(63)
  • 微信小程序uniapp+vue3+ts+pinia的环境搭建

    一.创建uniapp项目 通过vue-cli创建 二.安装依赖: 1.pnpm i 2.运行项目: 将package.json的 3.导入微信小程序开发工具 打开微信开发者工具, 导入 distdevmp-weixin 运行 三. TS 类型校验 在tsconfig.json文件中\\\"compilerOptions\\\"配置项内添加\\\"ignoreDeprecations\\\": “5.0” 额外配置Ts类型校验: 安装类型

    2024年04月10日
    浏览(73)
  • uniapp微信小程序使用axios(vue3+axios+ts版)

    \\\"vue\\\": \\\"^3.2.45\\\",  \\\"axios\\\": \\\"^1.4.0\\\",  \\\"axios-miniprogram-adapter\\\": \\\"^0.3.5\\\", yarn add axios axios-miniprogram-adapter 在 utils 创建 utils/request.ts 文件 在 src 目录下创建 src/api/config 文件夹 config文件夹中创建home.ts文件,首页的接口都放在里面统一管理  和 config 文件夹同级创建home.ts文件,统一管理请求

    2024年02月16日
    浏览(67)
  • uniapp----微信小程序 日历组件(周日历&& 月日历)【Vue3+ts+uView】

    用Vue3+ts+uView来编写日历组件; 存在周日历和月日历两种显示方式; 高亮显示当天日期,红点渲染有数据的日期,点击显示数据 1. calendar-week-mouth组件代码 2. 在页面引用组件

    2024年02月04日
    浏览(73)
  • 使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)

    uni-create-view :用于快速创建 uni-app 页面 uni-helper uni-app :代码提示 uniapp 小程序扩展 :鼠标悬停查文档 1.在types属性中添加属性名 @types/wechat-miniprogram 和  @uni-helper/uni-app-types. 2.添加vueCompilerOptions选项 ①在VS Code中找到设置 ②在设置中搜索文件关联 ③添加这两个文件名,值为

    2024年04月27日
    浏览(71)
  • uniapp导入echarts类库 开发图表类小程序vue3+ts+vite

    微信小程序和抖音小程序等都支持: 使用步骤如下 第一步:下载插件包 下载echarts插件包,并导入到项目中,然后使用插件中的组件创建容器,并导入数据就可以了。 echarts插件包地址:echarts - DCloud 插件市场 如果你是使用hbuilder写的,可以直接导入,如果你是vscode写的,就

    2024年01月21日
    浏览(46)
  • uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查

    首先要知道eslint与prettier的区别,ESLint 是一个用于检测 JavaScript 代码中的错误和潜在问题的工具。它只关注你写的代码是否正确,不会管你代码的格式;Prettier 则是一个代码格式化工具,它旨在确保代码在缩进、空格、换行、引号和分号等格式化方面遵循一致的规则,在

    2024年03月16日
    浏览(66)
  • vue3+ts实现element Plus Tree组件单选和取消单选的功能(取消已经选中的树节点),及vue3的proxy对象转换

     具体效果和代码如下: 点击了\\\"节点1\\\"并高亮显示 打印结果如下  vue3的打印对象是proxy,如需变成单纯的数组对象可以使用 JSON.parse(JSON.stringify(list))进行转换。  再次点击\\\"节点1\\\"则取消当前选中   如果对您有帮助点个赞,关注收藏一下吧 。

    2024年02月12日
    浏览(54)
  • uniapp--- 微信小程序 用户隐私新规相关代码调整【vue3+ts+uView框架】

    官方公告地址:https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801 用户隐私保护指引填写说明地址:https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/ 1) 需要在9月15前更新完毕,否则会无法使用获取手机号 手机相册等相关信息。 2) 微信小程序开发工具

    2024年02月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包