微信小程序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秒后自动消失, ...
随机推荐
- MATLAB神经网络(6) PID神经元网络解耦控制算法——多变量系统控制
6.1 案例背景 6.1.1 PID神经元网络结构 PID神经元网络从结构上可以分为输入层.隐含层和输出层三层,$n$个控制量的PID神经元网络包含$n$个并列的相同子网络,各个子网络间既相互独立,又 ...
- .NET 开发工具盘点和现状
在这里我盘点一下.NET的开发工具:Visual Studio.Jetbrains Rider.Mono Develop.SharpDevelop.QuickSharp.Visual Studio C ...
- XiaoQi.Study 项目(三)
一.配置跨域 1.首先注册跨域要求 ,(可访问的IP.端口) //注册跨域 services.AddCors(options => { options.AddPolicy("XiaoQ ...
- iview-admin里面的 axios 给包装了一层数据 libs/axios.js 数据做了一层拦截
interceptors (instance, url) { // 请求拦截 instance.interceptors.request.use(config => { // 添加全局的load ...
- Jmeter——如何使得token在各线程组间引用的游刃有余
在以前的博文中,有介绍过,jmeter基本的关联,关联就是将参数在各接口中动态传参,使得接口脚本变得灵活使用,非一次性脚本.今天再来介绍一种jmeter全局变量的设置与使用,可以让脚本运用更丰富,场景 ...
- CSS每日学习笔记(2)
7.31.2019 1.CSS定位:允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. CSS 有三种基本的定位机制:普通流.浮动和绝对定位.除非专 ...
- scrapy框架在未登录模式下爬取文本,文件和图片的几点收获
1.什么是API接口? https://baijiahao.baidu.com/s?id=1597881116201407882&wfr=spider&for=pc 2.spider文 ...
- Python中常见的报错名称
Python中常见的报错名称 1.SyntaxError 语法错误.看看是否用Python关键字命名变量,有没有使用中文符号,运算符.逻辑运算符等符号是不是使用不规范. 2.IndentationEr ...
- canvas绘制折线图
效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...
- DjangoORM操作之其他知识点
一.F与Q查询 F查询 F查询的应用场景主要是当你想要查询字段需要与数据库中的另外一个字段进行比较的时候,基于我们前面所学的知识点无法完成,那就需要用到F查询. F的导入 from django.db ...