uni-app中的DOM操作

让页面滚动到 ref 对应的组件-scrollToElement-dom

一、让页面滚动到 ref 对应的组件-scrollToElement

scrollToElement(ref, options)
让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 ，, 等可滚动组件中。

• @ref，要滚动到的那个节点。
• @options - offset，一个到其可见位置的偏移距离，默认是 0。- animated，是否需要附带滚动动画，默认是 true。

<template><viewclass="wrapper"><scrollerclass="scroller"><viewclass="row"v-for="(name, index) in rows":ref="'item'+index"><textclass="text":ref="'text'+index">{{name}}</text></view></scroller><viewclass="group"><text@click="goto10"class="button">Go to 10</text><text@click="goto20"class="button">Go to 20</text></view></view></template><script>const dom = uni.requireNativePlugin('dom')exportdefault{data(){return{rows:[]}},created(){for(let i =0; i <30; i++){this.rows.push('row '+ i)}},methods:{goto10(count){const el =this.$refs.item10[0]
          dom.scrollToElement(el,{})},goto20(count){const el =this.$refs.item20[0]
          dom.scrollToElement(el,{offset:0})}}}</script><stylescoped>.scroller{width:700rpx;height:500px;border-width: 3px;border-style: solid;border-color:rgb(162, 217, 192);margin:0 25rpx;}.row{height: 100rpx;flex-direction: column;justify-content: center;padding-left: 30rpx;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #DDDDDD;}.text{font-size: 45rpx;color: #666666;}.group{flex-direction: row;justify-content: center;margin-top: 60rpx;}.button{width: 200rpx;padding-top: 20rpx;padding-bottom: 20rpx;font-size: 40rpx;margin-left: 30rpx;margin-right: 30rpx;text-align: center;color: #41B883;border-width: 2px;border-style: solid;border-color:rgb(162, 217, 192);background-color:rgba(162, 217, 192, 0.2);}</style>

二、animation

1、

animation

模块可以用来在组件上执行动画。

JS-Animation

可以对组件执行一系列简单的

变换

(

位置、大小、旋转角度、背景颜色和不透明度

。
2、举个例子，如果有一个

image

组件，通过动画你可以对其进行

移动、旋转、拉伸或收缩

等动作。
3、点击方块后的动画效果

<template><viewclass="box"><viewref="test"@click="move"class="box-item"></view></view></template><script>const animation = uni.requireNativePlugin('animation')exportdefault{methods:{move(){var testEl =this.$refs.test;
                  animation.transition(testEl,{styles:{backgroundColor:'#007AFF',transform:'translate(100px, 80px)',transformOrigin:'center center'},duration:800,//mstimingFunction:'ease',delay:0//ms},()=>{
                      uni.showToast({title:'finished',icon:'none'});})}}}</script><stylescoped>.box{width:750rpx;height:750rpx;}.box-item{width: 250rpx;height: 250rpx;background-color: #00aaff;}</style>

三、addRule(加载字体)

addRule(不支持vue3版本)
Weex 提供 DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfont 和 custom font。开发者可以使用下面的代码加载自定义字体：

<template><view><textclass="my-iconfont">&#xe85c;</text></view></template><script>exportdefault{beforeCreate(){const domModule = uni.requireNativePlugin('dom')
                domModule.addRule('fontFace',{'fontFamily':"myIconfont",'src':"url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"});}}</script><style>.my-iconfont{font-family:myIconfont;font-size:60rpx;color: #00AAFF;}</style>

addRule(type, contentObject)

• @fontFace协议名称,不可修改。
• @fontFamilyfont-family的名称。
• @src 字体地址，url(‘’) 是保留字段，其参数如下: - http. 从HTTP请求加载, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')- https. 从HTTPS请求加载, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')- local, Android ONLY. 从assets目录读取, e.g. url(‘local://foo.ttf’), foo.ttf 是文件名在你的assets目录中.- file. 从本地文件读取, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')- data. 从base64读取, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....'), 上述data字段不全。

注意:

addRule 方法里的 fontFamily 可以随意取。这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。 如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。 调用addRule 在 beforeCreate 中是被推荐的。

学习地址