chualosue
chualosue
  • 发布:2020-07-22 10:27
  • 更新:2020-11-23 21:59
  • 阅读:2715

app端要怎么实现用户切换字体大中小呢

分类:uni-app

如题,新手,查百度的时候看是可以用scss设置来进行,但是里面有一句通过window.document.documentElement.setAttribute(‘data-size‘, size)进行修改data-size=0或1或2来进行修改,但是app端不是没有window.document嘛,那要怎么处理呢,完全不懂scss

复制代码@charset "utf-8";  
@import "./variable.scss";  
@mixin add-size($size){  
    font-size: $size;  
    [data-size="0"] & {  
        font-size: $font_size_30;  
    }  
    [data-size="1"] & {  
        font-size: $font_size_34;  
    }  
    [data-size="2"] & {  
        font-size: $font_size_60;  
    }  
}
复制代码/* 存放变量 */  
$font_size_30:30rpx;  
$font_size_32:32rpx;  
$font_size_34:34rpx;  
$font_size_36:36rpx;  
$font_size_40:40rpx;  
$font_size_60:60rpx;
2020-07-22 10:27 负责人:无 分享
已邀请:
gftttrrtrt4

gftttrrtrt4 - s

可以这样

复制代码var wvs = plus.webview.all()  
      for (var i = 0; i < wvs.length; i++) {  
        wvs[i].evalJS(  
          `window.document.documentElement.setAttribute('data-size', 0)`  
        )  
      }
  • chualosue (作者)

    可以用!!感谢!

    2020-07-22 11:25

  • w***@qq.com

    回复 chualosue: 那个plus是什么来的

    2020-08-06 15:30

  • w***@qq.com

    请问一下,这个plus是什么来的,新手不懂~

    2020-08-06 15:32

  • chualosue (作者)

    回复 w***@qq.com: 是h5+方法,可以看这个里面 http://www.html5plus.org/doc/h5p.html

    2020-08-06 15:35

  • w***@qq.com

    回复 chualosue: oh no 官网好像说小程序不支持

    2020-08-06 15:38

忆夕语

忆夕语

请问一下你是怎么实现的,我使用后没有全局修改

  • chualosue (作者)

    app里的话可以通过h5+方法修改上面举例的data-size变量,然后scss混入进行修改

    2020-11-24 13:36

  • 忆夕语

    回复 chualosue: 请问一下,这个是在哪个页面进行调用这个方法 wvs[i].evalJS 呢?,我目前在app.vue 中的 onshow调用 ,但只能改变一个页面时样式,其他无法改变页面

    2020-11-24 14:14

  • chualosue (作者)

    回复 忆夕语: 每重新开启一个页面都需要调用

    2020-11-24 14:46

  • 忆夕语

    回复 chualosue: 好的,谢谢

    2020-11-24 15:02

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容