Tencent / wepy

小程序组件化开发框架
https://wepyjs.gitee.io/wepy-docs/
Other
22.49k stars 3.05k forks source link

按照官网的写法,组件不显示。必须写在 repeat 标签里才显示。我的组件是这样写的。 #550

Closed jessjava closed 6 years ago

jessjava commented 6 years ago

我的组件是这样写的。

<template>
  <view>
        <block wx:for="{{attachments}}" wx:key="ats{{index}}" wx:for-item="item2">
            <view class="attachmentArea" wx:if="{{imageType.includes(item2.attachmentType)==true}}">
                    <image mode="aspectFill" src="{{server}}{{item2.attachmentUrl}}" 
                    @tap.stop="previewImage({{ item2.attachmentUrl }},{{attachments}})" 
                    style="width:{{attachments.length==1?imgWidthSignle:noticImgWidth}};height:{{noticImgHeight}}"/>
            </view>
        </block>
  </view>
</template>

<script>
import wepy from 'wepy'
import config from '../config/api'

export default class ImageBox extends wepy.component {
  props = {
    attachments: Object
  }

  data = {
    server: `${config.server}/download`,
    imgWidthSignle:"11em",
    noticImgWidth:"5.4em",
    noticImgHeight:"5.4em",
    imageType:["img","IMG","png","PNG","jpg","JPG","jpeg","JPEG"]
  }

  methods = {
    previewImage (cur,list) {
        let files = Array.from(list,x=>{if(this.imageType.includes(x.attachmentType))return  `${this.server}${x.attachmentUrl}`})
        files = files.filter(x => !!x)
        console.error(cur,files)
        wx.previewImage({
            current: `${this.server}${cur}`,
            urls: files
        })
    }
  }

  onLoad(){
    console.log(this.attachments)
  }
}
</script>

我在其他页面引入这个组件的时候:组件必须写在 repeat 标签里面才能显示。为什么啊。 显示不出来:<imagebox :attachments="xxx"></imagebox> repeat:<repeat><imagebox :attachments="xxx"></imagebox></repeat> 没有任何循环!!!

<script>
import imagebox from '../../../components/imagebox'
export default class CommentInfo extends auth{
        config={  "navigationBarTitleText": "留言详情"  };

        components = {
            imagebox
        }
}
</script>
Gcaufy commented 6 years ago

改成这样试一试。

components = {
    imagebox: imagebox
}
jessjava commented 6 years ago

找到原因了。给你描述一下: 父页面

data{
   viewobj:{names:[]}
}

组件页面

props{
   myNames:Object
}

我在传递的时候需要这样:

onLoad(
 //模拟请求
 setTimeout(()={
    let newData = {names:[{},{}...]};
    this.viewobj={... newData}
 },2000);
)

<compont :myNames.sync="viewobj.names"></compont> 事实说明上面这样是不行的

必须在父页面data 声明 tmpNames:[],然后在父页面给 tmpNames 赋值之后用下面这种方式才可以

onLoad(
 //模拟请求
 setTimeout(()={
    let newData = {names:[{},{}...]};
    this.viewobj={... newData}
    this.tmpNames =    this.viewobj.names;
 },2000);
)

<compont :myNames.sync="tmpNames"></compont>

请教一下原因。感谢!

Gcaufy commented 6 years ago

这是同一个问题么? 组件一定要放到repeat中才能编译出来?

<compont :myNames.sync="viewobj.names"></compont>

暂不支持 点操作。

jessjava commented 6 years ago

是同一个问题

jessjava commented 6 years ago

又遇到一个问题。重复进入父页。根据不同参数查询出来的list不能准确传递。还是遗留上次的值。

另外前段时间给您提过一个data值重复进入遗留值得问题。(需要手机端打开调试模式看控制台)也是遗留数据问题。

jessjava commented 6 years ago

https://github.com/jessjava/wepytest

给您写了个demo,您有空看看哦

操作很简单: 列表页,info页面(info页面引用了一个组件) 操作:在列表页,点击第一条,进入info没有值。back之后,点击第二条进入info显示的是上一条记录的查询结果,依次类推,back之后,每点依次进入info都会遗留上一次的查询结果。 手机端有这个问题。开发者端没问题。

Gcaufy commented 6 years ago

gif_20171122104954

Gcaufy commented 6 years ago

@jessjava 安卓测试没有问题。 另外,如果和标题问题无关,请另开一个issue说明问题