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

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

本系统是使用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.imgurl
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },

修改成功，效果如下