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

问题描述:

  在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. Redis(8)——发布/订阅与Stream

    一.Redis 中的发布/订阅功能 发布/ 订阅系统 是 Web 系统中比较常用的一个功能.简单点说就是 发布者发布消息,订阅者接受消息,这有点类似于我们的报纸/ 杂志社之类的: (借用前边的一张图) ...

  2. 我用STM32MP1做了个疫情监控平台2—Qt环境搭建

    目录 1.嵌入式Qt简介 2.查看开发板Qt库的版本 3.主机搭建Qt环境 4.第一个Qt程序--Hello World 5.一些问题 @ 1.嵌入式Qt简介 Qt 是一个跨平台的应用程序开发框架.使 ...

  3. Java14来了!Switch竟如此简单?Lombok也不需要了?来使用Idea配置Java14的开发环境吧!

    Java 14 在 2020.3.17 日发布正式版了,但现在很多公司还在使用 Java 7 或 Java 8,每当看到 Java 又发布新版本心里就慌得一匹.不过此版本并不是 LTS (长期支持版) ...

  4. 普通人学习rust——从零到放弃 变量、不可变量、常量

    普通人学习rust--从零到放弃 变量.不可变量.常量 环境 本文章内容基于如下环境,如若出入请参考当前环境. rustc 1.42.0 (b8cedc004 2020-03-09) cargo 1. ...

  5. 搭建DVWA漏洞环境

    DVWA是一款开源的渗透测试漏洞练习平台,其中内含XSS.SQL注入.文件上传.文件包含.CSRF和暴力破解等各个难度的测试环境. 搭建步骤: 1.在Windows系统中安装WAMP 下载地址:htt ...

  6. 【codeforces】Codeforces Round #612 (Div. 2) C. Garland——DP

    题目链接 贪心模拟了半天,最后放弃了 题意 给你一串从1−n1-n1−n的序列,其中部分未知(表示为0),补全序列使得相邻数值奇偶性相反的数量最少 相邻数值的奇偶性相反:两个相邻的两个数值,其中一个为 ...

  7. [gcd]Codeforces Common Divisors

    Common Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  8. mycat主要参数

    以下内容源于mycat官方文档,记录下来方便直接查看: mycat版本:1.6 负载均衡类型,目前的取值有 3 种:1. balance="0", 不开启读写分离机制,所有读操作都 ...

  9. [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted

    字面意思大概就是: [干预]忽略尝试取消带有cancelable = false的touchmove事件的尝试,例如,因为滚动正在进行并且无法中断. 解决方法: 1.添加样式更改 将滑动报错的标签样式 ...

  10. JavaScript 趣味题。

    第一题: const Greeters = [] for (var i = 0 ; i < 10 ; i++) { Greeters.push(function () { return cons ...