这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决。

问题描述:

  在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用,一直都没出现什么大问题。但是这次在微信小程序上,问题就出现了。

因为手机屏幕普遍和PC比小很多,template正常情况下我们给content一个padding:1 30rpx 40rpx 30rpx;时富文本内容在手机屏幕上显示时两边有留白,页面会好看,也为了用户手握手机是不回方便看文本。

  文本内容设置padding后就成功,但是image在其中就超出屏幕显示区域了(如下图)

严重影响页面展示!

为了解决这个问题,我前后断断续续用了三四天时间;解决办法其实很简单!

我在控制台中查看image的样式,最不明白的就是element.style (如图)

看见图中的width:365px;这是怎么设置的,我猜应该是js代码动态生成的,上网一查,果不其然这是js文件根据不同的屏幕尺寸动态设置的image宽度。怎么办?我难道要去找那段js代码吗?这样工作可想而知

那怎么解决呢?

element.style根本就不存在啊!

办法很就是:!important

没错,这个东西的作用就是提高指定CSS样式规则的应用优先权。

就是说:这个东西可以覆盖掉element.style里面的属性

于是我就增加了这段代码:

这个问题就解决了!

最后:具体这个js代码在哪我也没有去深究,问题也算解决了!现在就好了(如图);

微信小程序template富文本插件image宽度被js强制设置的更多相关文章

  1. 微信小程序开发--富文本插件wxParse的使用

    昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...

  2. 微信小程序之富文本解析

    亲身体验 wxparse 是个坑,弃之不用 微信小程序的 <rich-text>标签挺好用的 用法如下: 1.wxml页面 <rich-text nodes="{{node ...

  3. 处理后台传过来的json数据-显示到微信小程序的富文本里

    解析数据: JSON.parse(); 获取 加密的文章内容, 将解密文章内容, 将解密后的img标签的路径换成绝对地址(服务器) 调整图片的大小,

  4. 微信小程序简易富文本

  5. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  6. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  7. 微信小程序 template添加点击事件

    介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...

  8. 微信小程序——template详细使用

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹  1.1.2.使用 name 属性,作为模板的名字.然后 ...

  9. 微信小程序——表单验证插件WxValidate的二次封装(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

随机推荐

  1. 如何在国内离线安装Chrome扩展并科学查资料

    国内离线安装Chrome扩展 这些链接是从知乎国内离线安装 Chrome 扩展程序的方法总结 - 知乎看到的, 怕这个链接失效, 在这里自己备一份: Crx4Chrome - Download CRX ...

  2. Java Grammar(三):修饰符

    简介 修饰符是用于限定类型以及类型成员申明的一种符号,从修饰对象上可以分为类修饰符,方法修饰符,变量修饰符:从功能上可以划分为访问控制修饰符和非访问修饰符.访问修饰符控制访问权限,不同的访问修饰符有不 ...

  3. 浅析Redis分布式锁---从自己实现到Redisson的实现

    当我们在单机情况下,遇到并发问题,可以使用juc包下的lock锁,或者synchronized关键字来加锁.但是这俩都是JVM级别的锁,如果跨了JVM这两个锁就不能控制并发问题了,也就是说在分布式集群 ...

  4. BJDCTF

    python3的模板注入 非常简单...就是直接执行命令就行..虽然过滤了flag,但是拼接下就好了.... payload: http://fd5883ee-b8e2-4bf1-88af-33936 ...

  5. 测试必知必会系列- Linux常用命令 - ps(重点)

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 查看所 ...

  6. JavaScript零宽字符

    什么是零宽字符 一种不可打印的Unicode字符, 在浏览器等环境不可见, 但是真是存在, 获取字符串长度时也会占位置, 表示某一种控制功能的字符. 常见的零宽字符有哪些 零宽空格(zero-widt ...

  7. JVM收集器简介

    JVM GC收集器集合:

  8. 4L-线性表之数组

    关注公众号 MageByte,设置星标点「在看」是我们创造好文的动力.后台回复 "加群" 进入技术交流群获更多技术成长. 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同 ...

  9. masql数据库的表查询

    昨日回顾 表与表之间建关系 一对多 换位思考 图书与出版社 先站在左表: 考虑左表的多条数据能否对应右表的一条数据 翻译:多本书能否被一个出版社出版 可以! 注意:单站在一张得出的表关系并不能明确两张 ...

  10. hdu1728 逃离迷宫bfs

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1728/ 关于广度优先搜索的第一篇题解.广度优先搜索,就是状态树的层次遍历,一层一层的搜索,直到搜索到目标状态为止 ...