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

问题描述:

  在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. 自定义添加$_SERVER中的变量

    如何根据自己项目中的需求自定义$_SERVER中的变量呢?比如$_SERVER['XU_TEXT_PARAM'],这个超全局变量输出肯定是会报错的.那如何自定义它,让它输出我们想要输出的值呢? 1.在 ...

  2. vue列表中表单的验证

    先上效果图: 在点击确认的时候会验证带有验证的字段 嵌套逻辑: 表单 表格 表格项 表单项 表单项 表格项 表格 表单 代码部分: <!-- 注意此处的model,需要一个对象,而我们的数据是一 ...

  3. 在vue中实现锚点定位功能

    场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...

  4. Java 锁详解(转)

    转自 https://www.cnblogs.com/jyroy/p/11365935.html Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率.本文旨在对锁相 ...

  5. window 查看端口 杀端口

    最近写项目,总是出现端口被占用的问题,原来傻傻的把电脑重启一下,终于有一天受不了了,想要想办法解决.刚开始从网上找了好多教程,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程( ...

  6. 【转】Kerberos简介

    Kerberos协议: Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-grantin ...

  7. shell编程之变量赋值

    1.变量赋值: name=lbg 等号前后不能有空格 name="Lebron James" 变量值中有空格要用双引号 echo ${name} 用${}更保险 shopt -s ...

  8. VUE npm run dev 启动时,报了一大堆错误 Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 7.x

    npm run dev 启动时,报了一大堆错误 Module build failed: Error: Missing binding E:\2017VocaSchool\vocationWeb\no ...

  9. SVN分支合并指南

    SVN分支合并主干具体操作步骤 1. 在装有svn插件的myeclipse中,在主干上选择需要合并的文件或文件夹, 右击--> team -->合并(merge) 2.选择合并类型--合并 ...

  10. CF 1012C Dp

    Welcome to Innopolis city. Throughout the whole year, Innopolis citizens suffer from everlasting cit ...