一、编辑器解析
有些情况需要展示接口返回的富文本编辑器当中的内容，也就是包含一些html标签，如<p>,<span>这些等等，如果是vue我们是可以直接用v-html解析的，但是小程序当中是没有这些标签的，所以我们需要借助插件
首先，贴上插件的git地址：https://github.com/icindy/wxParse
下载wxParese文件夹，将该文件夹复制到自己的小程序项目中
目录结构
然后在.wxml，.js，.wxss三个文件下分别引入
<import src="../../wxParse/wxParse.wxml" />
var WxParse = require('../../wxParse/wxParse.js');
@import "../../wxParse/wxParse.wxss";
引入这些文件之后，
在js里面的生命周期函数onLoad中写
WxParse.wxParse(`cont`, 'html', item, that, 0);
那么对应的wxml文件中就必须也要相对应的写
<view class='uinn'>
<template is="wxParse" data="{{wxParseData: cont.nodes}}" />
</view>
注：cont这里两个地方必须对应，
WxParse.wxParse(`cont`, 'html', item, that, 0);每个属性对应的解释
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
我这边的模拟情况是一个list列表，然后每个列表里面都有一个字段descript中存放的是带有html标签 的富文本编辑器内容
js中代码如下
onLoad: function (options) {
let that = this;
var descript = [];
this.data.findTime.map(item =>{
descript.push(item.descript);
})
descript.map((item, index)=>{
WxParse.wxParse(`cont${index}`, 'html', item, that, 0);
})
},
xml中代码如下：
<view wx:for="{{findTime}}" wx:key="findTimeId" wx:for-item="item" wx:for-index="index" class="findTime clearfix ">
<image src="{{item.imgUrl}}"></image>
<view class='sign'><text>{{item.sign}}</text></view>
<text class='title'>{{item.title}}</text>
<view wx:if="{{index == 0}}">
<view class='uinn'>
<template is="wxParse" data="{{wxParseData: cont0.nodes}}" />
</view>
</view>
<view wx:elif="{{index == 1}}">
<view class='uinn'>
<template is="wxParse" data="{{wxParseData: cont1.nodes}}" />
</view>
</view>
<view wx:elif="{{index == 2}}">
<view class='uinn'>
<template is="wxParse" data="{{wxParseData: cont2.nodes}}" />
</view>
</view>
<view wx:else>
<view class='uinn'>
<template is="wxParse" data="{{wxParseData: cont3.nodes}}" />
</view>
</view>
</view>
二、last-child不生效
首先不放在小程序里说，单独拿到html里来说，这样更容易懂，其实原理和小程序类似
.div2 p:last-child {
background:purple;
color:red;
}
<div class="div1">
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>p, 第五个段落。</p>
<div class="div2">
<p>p, 第二个段落。</p>
<p>p, 第三个段落。</p>
<p>p, 第四个段落。</p>
<div class="div3">div, 我是最后的元素。</div>
</div>
</div>
可以看到并没有效果，这是因为p标签不是它父元素中的子元素中的最后一个，div才是最后一个，
如果是这么写
<div class="div1">
<h1>这是标题</h1>
<p>第一个段落。</p>
<div class="div2">
<p>p, 第二个段落。</p>
<p>p, 第三个段落。</p>
<p>p, 第四个段落。</p>
<div class="div3">div, 我是最后的元素。</div>
<p>p, 第五个段落。</p>
</div>
</div>
这个时候就可能实现效果
还有一种写法我们可以写成
.div2 p:last-of-type {
·background:purple;
·color:red;
}
这两种方法都可以解决
我在小程序中遇到的问题和以上类似
当时除了用伪类的方法还有一个方法就是下面的动态添加class，通过class名改动
三、动态添加class
<view wx:for="{{findTime}}" wx:key="findTimeId" wx:for-item="item" wx:for-index="index" class="findTime clearfix {{index == findTime.length-1 ? 'cur' : ''}} ">
</view>
这里有两个注意点：
（1）index不需要加引号
（2）要增加的class名要加引号
网友评论