微信小程序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秒后自动消失, ...
随机推荐
- Hadoop集群搭建(一)~虚拟机的创建
Hadoop集群的搭建包括,虚拟机系统的安装:安装JDK,Hadoop:克隆虚拟机:伪分布式的搭建:安装zookeeper:Hive:Hbae:Spark等等: 我将分为多篇文章来记录.这篇文章主要写 ...
- Git 基础入门
目录 git安装 基本设置 创建版本库 相关概念 将代码提交到分支仓库 版本回退 代码修改 撤销修改 文件删除 github 远程仓库 添加远程仓库 克隆远程仓库 分支操作 忽略特殊文件 git安装 ...
- 程序员找工作必备 PHP 基础面试题
1.优化 MYSQL 数据库的方法 (1) 选取最适用的字段属性,尽可能减少定义字段长度,尽量把字段设置 NOT NULL, 例如’省份,性别’, 最好设置为 ENUM (2) 使用连接(JOIN)来 ...
- Spring Cloud 系列之 Netflix Hystrix 服务监控
Actuator Hystrix 除了可以实现服务容错之外,还提供了近乎实时的监控功能,将服务执行结果和运行指标,请求数量成功数量等等这些状态通过 Actuator 进行收集,然后访问 /actuat ...
- JSP+Servlet+JDBC+Mysql实现的天才会议管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://github.com/hegexunmeng/meeting-system 这次分享一个会议管理系统,前端后端几乎没有使用任何框架,适合 ...
- Loadrunner 11安装和破解
一.安装环境和文件准备 1.操作系统:Windows Server 2008 R2 Enterprise: 2.loadrunner版本:loadrunner 11: 3.安装浏览器:火狐39.0: ...
- 面试刷题22:CAS和AQS是什么?
java并发包提供的同步工具和线程池,底层是基于什么原理来设计和实现的呢?这个非常重要. 我是李福春,我在准备面试,今天的题目是: CAS和AQS是什么? 答:CAS是一系列的操作集合,获取当前值进行 ...
- [JVM教程与调优] 了解JVM 堆内存溢出以及非堆内存溢出
在上一章中我们介绍了JVM运行时参数以及jstat指令相关内容:[JVM教程与调优] 什么是JVM运行时参数?.下面我们来介绍一下jmap+MAT内存溢出. 首先我们来介绍一下下JVM的内存结构. J ...
- OpenCV-Python BRIEF(二进制的鲁棒独立基本特征) | 四十二
目标 在本章中,我们将看到BRIEF算法的基础知识 理论 我们知道SIFT使用128维矢量作为描述符.由于它使用浮点数,因此基本上需要512个字节.同样,SURF最少也需要256个字节(用于64像素) ...
- OpenCV-Python 图像金字塔 | 二十
目标 在本章中, 我们将学习图像金字塔 我们将使用图像金字塔创建一个新的水果"Orapple" 我们将看到以下功能:cv.pyrUp(),cv.pyrDown() 理论 通常,我们 ...