uni-app（app端）元素样式问题

前言

uni-app不支持使用js控制元素样式，仅支持获取样式。

解决方法

动态绑定class

向目标元素动态绑定class，然后给该class添加css样式。

如html部分:

<userInfo :class="{'show': scrollSwitch}"></userInfo>

动态绑定style

向该元素直接绑定样式，此方法好处是可以使用变量。

如html部分：

<view :style="{
              'width': lW + 'px',
              'background-color': lineColor
              }" />

获取元素相关信息

1. 创建查找变量（SelectorQuery）

   const query = uni.createSelectorQuery();
   

   const query = uni.createSelectorQuery().in(this);
   

   该方法构造了一个查找变量，通过这个变量可以查找当前（this）组件，返回SelectorQuery 对象。

   推荐在<script></script>标签内定义全局变量query，

   let query; 
   

   然后在onReady()中创建查找变量。

   onReady() {
       query = uni.createSelectorQuery().in(this);
   },
   

2. 查找匹配元素（select(selector)）

   首先selector仅支持一下语法：

   • 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

   然后select有以下几种：

   • selectorQuery.selectAll(selector)
     在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
   • selectorQuery.selectViewport()
     选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。

   最后执行所有请求：

   ​ selectorQuery.exec(callback)

   ​ 该方法写在 NodesRef 对象方法之后，代表执行之前的所有方法。

   let view = uni.createSelectorQuery().in(this).select(".test");
   
   view.fields({
     size: true,
     scrollOffset: true
   }, data => {
     console.log("得到节点信息" + JSON.stringify(data));
     console.log("节点的宽为" + data.width);
   }).exec();
   

3. 获取元素节点的信息（NodesRef）

   NodesRef 对象是用于获取节点信息的对象。

   它有如下几种常用方法：

   • nodesRef.fields(object,callback)
     获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。

     详见 nodesRef.fields(object,callback)

   • nodesRef.boundingClientRect(callback)
     添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

     详见 nodesRef.boundingClientRect(callback)

   • nodesRef.scrollOffset(callback)
     添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport。返回 NodesRef 对应的 SelectorQuery。

     详见 nodesRef.scrollOffset(callback)