小程序富文本WxParse插件

news/2024/7/20 1:08:30 标签: wxParse, 富文本, 小程序

参考https://blog.csdn.net/loveyoulouyou/article/details/83413628

下载WxParse插件,插件地址https://github.com/icindy/wxParse

css部分:

@import "../../utils/wxParse/wxParse.wxss";

html部分:

<import src="../../utils/wxParse/wxParse.wxml"/>

<block wx:for='{{richText}}' wx:for-index='itemIndex' wx:for-item='item' wx:key=''>

<view class="listItem">

<image src="{{item.img}}"></image>

<view>{{item.title}}</view>

<view>

<template is="wxParse" data="{{wxParseData:artileList[itemIndex]}}"/>

</view>

</view>

</block>

js部分:

var WxParse = require("../../utils/wxParse/wxParse.js");

Page({

/**

* 页面的初始数据

*/

data: {

richText:[

{

'img': 'https://csdnimg.cn/cdn/content-toolbar/csdn-xie.png',

'title':'第一个title',

'des':'<p>第一个描述<span>哈哈哈哈哈撒多或</span></p>'

},

{

'img': 'https://csdnimg.cn/public/common/toolbar/images/message-icon.png',

'title': '第二个title',

'des': '<p>第二个描述<span>哈哈哈哈哈撒多或</span></p>'

},

{

'img': 'https://csdnimg.cn/public/common/toolbar/images/vipimg.png',

'title': '第三个title',

'des': '<p>第三个描述<span>哈哈哈哈哈撒多或</span></p>'

},

]

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

var that = this;

var richText = that.data.richText;

for (var i = 0; i < richText.length; i++) {

WxParse.wxParse('content' + i, 'html', richText[i]['des'], that);

if (i === richText.length - 1) {

WxParse.wxParseTemArray("artileList", 'content', richText.length, that)

}

}

},

 


http://www.niftyadmin.cn/n/797840.html

相关文章

layui根据条件修改表格固定行的颜色

当按钮样式存在 “noedit”时&#xff0c;该行变灰色 var data{ table :{ id:userlist-table, options:{ done:function(res,curr,count){ res.data.forEach(function (item, index) { …

关于js中location.href的用法

window.location.href"、"location.href"是本页面跳转 parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转举例说明&#xff1a;如果A,B,C,D都是jsp&#xff0c;D是C的iframe&#xff0c;C是B的iframe&#xff0c;B是…

小程序实现标尺滑动

效果图&#xff1a; html部分&#xff1a; <!--pages/test-rules/test-rules.wxml--> <view> <view class"ageCon"> <view class"title">年龄</view> <view class"ageOut"> <view class"hr&q…

vue引入bootstrap报错找不到模块modules

参考文档&#xff1a;https://segmentfault.com/a/1190000015765805 要使用bootstrap要先分两步&#xff0c; 第一步&#xff1a;引入jQuery 第二步&#xff1a;再引入bootstrap 1、建立一个vue工程。 2、使用命令npm install jquery --save-dev 引入jquery。 3、在webpa…

vue 实现数字滚动增加效果

参考&#xff1a;http://panjiachen.github.io/countTo/demo/ 效果&#xff1a; 使用vue-countTo插件 安装&#xff1a;npm install vue-count-to 使用&#xff1a; <template> <countTo refexample :startValstartVal :endValendVal :duration2000></coun…

CSS选择器汇总

一、overflow元素overflow : hidden,scroll,auto隐藏或显示滚动条overflow-yoverflow-x二、设置表格间间隔border-collapse: separate;border-spacing: 100px 50px;三、合并单元格border-collapse:collapse;四、border属性border : 1px solid black;border-styleborder-width;b…

vue监听滚动事件 实现元素吸顶

添加滚动监听事件&#xff1a; mounted () { window.addEventListener(scroll, this.handleScroll) }, 页面销毁需要取消监听&#xff1a; destroyed(){ window.removeEventListener(scroll, this.handleScroll) } 使用&#xff1a; <template> <div class&quo…

CSS样式实现左右直线中间文字

/*子导航样式*/ div.subnav-banner { height: 60px; line-height: 60px; text-align: center; width:1180px; margin: 20px auto;} .subnav-banner .line { display: inline-block; width: 44%; border-top: 1px solid #ccc ; } .subnav-banner…