小程序富文本提取图片可放大缩小


Posted in Javascript onMay 26, 2020

本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码,供大家参考,具体内容如下

启发:

因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇博客,供大家参考

step1

获取到富文本内容,怎么获取就是请求数据嘛,这个不在赘述了。

var nodes = res.data.data.content;

step2

检测 nodes中是否有img标签,这个有很多方法,我这里用的indexOf

if (nodes.indexOf("src") >= 0) {
}

step3

第三步就是用正则全局匹配img标签,并且替换成空,这里setData是为了把图片添加到wxml显示的,说下match和captrue,第一个是带有img标签的返回值,第二个是src的值

//s3:正则匹配所有图片路径
var imgs = [];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
 imgs.push(capture);
 that.setData({
  imgs: imgs
 });
 return '';
});

step4

最后就是把多余的p标签清除掉,影响样式

//s4:清除图片后正则匹配清除所有p标签
nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
 return '';
});

完整的过程,本例亲测可行

//富文本图片放大
var nodes = res.data.data.content;
if (nodes.indexOf("src") >= 0) {
 //正则匹配所有图片路径
 var imgs = [];
 nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
  imgs.push(capture);
  that.setData({
   imgs: imgs
  });
  return '';
 });
 //清除图片后正则匹配清除所有p标签
 nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
  return '';
 });
}

end

step5

wxml中

<view class='detail'>
 <rich-text nodes="{{nodes}}" bindtap='richImg'></rich-text>
</view>
<view class='detail1'>
 <block wx:for="{{imgs}}" wx:key="" wx:for-item="item">
   <image class='img' src='{{item}}' bindtap='chooseImg' data-src='{{item}}'></image>
 </block>
</view>

最后还有个预览的js

chooseImg: function (e) {  //预览
 var src = e.currentTarget.dataset.src;
 var urls = [];
 urls[0] = src;
 wx.previewImage({
  current: src, // 当前显示图片的http链接 
  urls: urls
 })
},

这里成功后可以需要调整图片的样式

最后

以上只是简单的demo,图片是连续的情况,但在富文本中可能会出现图片不连续,这个后续会贴出来,基本思路就是rich-text也是循环添加到wxml中,本例亲测可行,如有更好的方法,欢迎提出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
微信小程序自定义联系人弹窗
May 26 #Javascript
微信小程序单选框自定义赋值
May 26 #Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 #Javascript
jQuery弹框插件使用方法详解
May 26 #jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 #Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
You might like
劣质的PHP代码简化
2010/02/08 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
js单词形式的运算符
2014/05/06 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python实现杨辉三角思路
2017/07/14 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python基于SMTP协议发送邮件
2019/05/31 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
电话客服工作职责
2014/07/27 职场文书
材料物理专业求职信
2014/09/01 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Python超详细分步解析随机漫步
2022/03/17 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android