微信小程序template富文本插件image宽度被js强制设置
这段时间一直做微信小程序，过程中遇到了一个问题，这个问题一直没有得到完美的解决。
问题描述：
在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强制设置的更多相关文章
- 微信小程序开发--富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
- 微信小程序之富文本解析
亲身体验 wxparse 是个坑,弃之不用 微信小程序的 <rich-text>标签挺好用的 用法如下: 1.wxml页面 <rich-text nodes="{{node ...
- 处理后台传过来的json数据-显示到微信小程序的富文本里
解析数据: JSON.parse(); 获取 加密的文章内容, 将解密文章内容, 将解密后的img标签的路径换成绝对地址(服务器) 调整图片的大小,
- 微信小程序简易富文本
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序 template添加点击事件
介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...
- 微信小程序——template详细使用
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹 1.1.2.使用 name 属性,作为模板的名字.然后 ...
- 微信小程序——表单验证插件WxValidate的二次封装（终极版）
微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...
随机推荐
- Redis04——五分钟明白Redis的哨兵模式
和所有的数据库一样,Redis也支持集群化,Redis的集群分为分布式集群和主从集群.大部分公司采取的都是主从集群.所以在本篇文章内,我们将着重介绍Redis的主从集群及哨兵机制. 由于Redis的主 ...
- [code]poj3349 Snowflake Snow Snowflakes
哈希+挂链.可以用next数组挂链. ; type arr=..]of longint; var a,b:Array[..]of arr; next:Array[..]of longint; i,j, ...
- 数字逻辑与EDA设计
目录 第一章 数字逻辑基础 1.1数制与码制★★★ 数制 码制 1.2基本及常用的逻辑运算★★ 1.2逻辑函数表示方法★★ 1.3逻辑函数的化简★★★ 1.4常用74HC系列门电路芯片★ 第二章 组合 ...
- 从原子类和Unsafe来理解Java内存模型，AtomicInteger的incrementAndGet方法源码介绍，valueOffset偏移量的理解
众所周知,i++分为三步: 1. 读取i的值 2. 计算i+1 3. 将计算出i+1赋给i 可以使用锁来保持操作的原子性和变量可见性,用volatile保持值的可见性和操作顺序性: 从一个小例子引发的 ...
- SpringMVC框架——文件的上传与下载
使用SpringMVC框架做个小练习,需求: 1.单个图片上传并显示到页面中: 2.多个图片上传并显示到页面中: 3.上传文件后下载文件: 1.pom.xml中添加依赖 <!-- 文件上传 -- ...
- shell脚本基础-起始句的含义
大部分的shell脚本第一行,要么是 #!/bin/bash 要么是 #!/bin/sh 其实第二种是第一种的升级版,增加了协议posix(#!/bin/sh = #!/bin/bash + posi ...
- http server部署discuz
httpd服务器搭建discuz 第一步.数据库的配置 create database discuz; grant all privileges on discuz.* to 'discuz'@'lo ...
- hdu1541树状数组(降维打击）
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1541/ 题意是:在二维图上有一系列坐标,其中坐标给出的顺序是:按照y升序排序,如果y值相同则按照x升序排序.这个 ...
- 改变Dataframe的列的数据类型
1.查看DataFrame的数据类型 df.dtypes#查看各列数据类型 df[A].dtypes#查看A列数据类型 2.转换DataFrame的数据类型 df[A].astypes(int)#将A ...
- Spring05——Spring 如何实现事务管理
在此之前,我们已经了解了 Spring 相关的基础知识,今天将为给位带来,有关 Spring 事务代理的相关知识.关注我的公众号「Java面典」,每天 10:24 和你一起了解更多 Java 相关知识 ...