农村信息综合展示平台(微信网页)项目开发笔记三—

本篇记录在朋友圈功能页面中实现图片点击放大查看的功能，遇到了的问题

本系统是使用Vux库因此，为实现查看图片的功能就使用了Vux自带的Previewer，如何使用在这里就不多说，之间查看Vux文档。

1.我遇到的问题（当我点击图片时报错）

问题说明：this.$refs.previewer.show 不是一个函数（没有定义）

再看一下我的源码是怎么用的

<cell align-items="flex-start"  value-align="left" v-for="(pcircle,index) in pcircles" :key="index"><div v-show="pcircle.imgurl && pcircle.imgurl.length>0"> <!-- 判断是否有图片--><img class="previewer-demo-img" v-for="(list,index) in pcircle.imgurl" :key="index" :src="list.src" width="100" :style="{width: imgWidth, height: imgWidth}" @click="show(index)" ></div><div v-transfer-dom> <!--图片查看器 --><previewer :list="pcircle.imgurl" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer></div>

methods: { // 方法函数show (index) { // 图片放大显示this.$refs.previewer.show(index)}
}

pcircles数组变量存储的是朋友圈发布所有动态信息。

根据问题查看ref的说明：

关于ref注册时间的重要说明:因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模版中做数据绑定。

其实在这里主要问题出在，我把previewer放在v-for里面，实际渲染结果会导致创建不只一个 ref="previewer"，因此在我们执行dom操作时，不知道去执行哪一个previewer.

2.修改

2.1 把preview放到v-for 外面，为list绑定新变量imglist

<div v-transfer-dom> <!--图片查看器 --><previewer :list="imglist" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
</div>

2.2 点击事件添加参数（pcircle）

@click="show(pcircle,index)

2.3 imglist赋值，并使用方法this.$nextTick() (上一个dom节点加载后再执行具体操作)

show (pcircle,index) { // 图片放大显示this.imglist=pcircle.imgurlthis.$nextTick(() => {this.$refs.previewer.show(index)})},

修改成功，效果如下

农村信息综合展示平台(微信网页)项目开发笔记三——朋友圈开发遇到的问题相关推荐

微信公众平台开发之在网页上添加分享到朋友圈，关注微信号等按钮
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
在微信浏览器中做分享到朋友圈和分享到好友
最近一直看到有关做微信朋友圈分享的,下面我也总结一份: 如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮: 在微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSB ...
前端做微信好友分享_基于js实现微信发送好友如何分享到朋友圈、微博
微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. var imgUrl = "图片地址"; var l ...
计算机毕业设计ssm教师授课信息综合管理平台451gu系统+程序+源码+lw+远程部署
计算机毕业设计ssm教师授课信息综合管理平台451gu系统+程序+源码+lw+远程部署计算机毕业设计ssm教师授课信息综合管理平台451gu系统+程序+源码+lw+远程部署本源码技术栈: 项目架构 ...
Nodejs搭建前后端分离开发模式下的微信网页项目
原文链接:<Nodejs搭建前后端分离开发模式下的微信网页项目>- 陈帅华本文涉及对前后端分离及微信网页项目中的前端如何在本地环境中开发与调试的思考. 主要问题 1.如何配置微信公众平台 ...
微信网页项目（带支付）开发前准备
微信网页项目(带支付)开发前准备重要声明:本文章仅仅代表了作者个人对此观点的理解和表述.读者请查阅时持自己的意见进行讨论. 前言: 因为看了本网站的大神的微信公众号开发文章,完成了我的微信公众号开发 ...
校园综合服务平台-微信小程序
简介校园综合服务平台-微信小程序管理员:首页.个人中心.用户管理.联系信息管理.信息.系统管理等前台用户:首页.拼车信息.公告信息.个人中心.后台管理等前端后端校园综合服务平台-微信小程序 ...
医药行业信息综合管理平台
医药行业信息综合管理平台是由中科软科技股份有限公司自主研发的针对医药行业全业务流程的软件管理系统,其以业务流程为核心,涵盖了流向数据管理.客户关系管理.任务管理.办公管理等业务流程. 医药行业信息综 ...
plsql developer无监听程序_微信小程序支持分享到朋友圈啦！技术解读跟我来
千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验. 首先,我们看一下官方文档的描述,解读一下小程序分享 ...

农村信息综合展示平台(微信网页)项目开发笔记三——朋友圈开发遇到的问题

农村信息综合展示平台(微信网页)项目开发笔记三——朋友圈开发遇到的问题相关推荐

最新文章

热门文章