WXOPEN Club

自定义组件

发布于 7 年前作者 asun16086 次浏览最后编辑 7 年前来自 ask

自定义组件包含image标签，在page使用setData设置图片路径(网络图片)传给组件没法显示图片。问题版本: ios 6.5.14

若是使用page里的data的常量logo: "https://…jpg"能够成功显示。

10 回复
gxiao
gxiao1 楼6 年前

IOS1.6.5不会。其他未测试。

yandong
yandong2 楼6 年前

感谢反馈，我们查一下旧版本的问题。

wkang
wkang3 楼6 年前

在线等…

houguiying
houguiying4 楼6 年前

IOS版本6.5.13和6.5.14均不行。

yan97
yan975 楼6 年前

iOS的1.6.3以上有问题吗？

dqiu
dqiu6 楼6 年前

简单测试了一下，没有发现问题。麻烦提供一下出问题的代码？

guiying32
guiying327 楼6 年前

改了也不行。我也尝试了将imagePath替换成image依旧无效，查看到基本库为1.5.7;此问题目前仅在ios发现。

wantao
wantao8 楼6 年前

注意5（页面page.wxml）这段代码：在wxml里面，attribute要写成“image-path”。

jing83
jing839 楼6 年前

你好，如果自定义组件里面使用image加载本地路径的图片，图片是相对于自定义组件路径的（而不是页面路径）。

xiuyingjin
xiuyingjin10 楼5 年前

1.组件image-text-vertical.wxml

<!-- 纵向图文组件-->
<view class="image-text-vertical" bind:tap="selected">
  <image class="icon" src="{{imagePath}}" lazy-load="{{true}}"></image>
  <text class="title">{{title}} </text>
</view>

2.组件image-text-vertical.js

Component({
  properties: {
    title: {
      type: String
    },
    imagePath: {
      type: String
    },
    data: {
      type: Object
    }
  },
  methods: {
    selected: function () {
      this.triggerEvent('selected', this.data)
    }
  }
})

3.组件image-text-vertical.json

{
  "component": true
}

4.组件image-text-vertical.wxss

.icon {
  width: 40px;
  height: 40px;
  display: block;
  margin: 10px auto 5px;
  text-align: center;
}
 
.title {
  height: 30px;
  line-height: 30px;
  display: block;
  text-align: center;
}
 
.image-text-vertical {
  color: #000;
  width: 25%;
  size: 14px;
  float: left;
}

5.页面page.wxml

<view >
        <image-text-vertical wx:for="{{hotBrands}}" wx:for-item="hotBrand" wx:key="hotBrand.id" data="{{hotBrand}}" title="{{hotBrand.name}}" imagePath="{{ hotBrand.logo }}">
        </image-text-vertical>
</view>

6.页面page.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    hotBrands: []
  },
  onShow: function () {
    this.initData();
  },
  initData() {
  var hotBrands = [{id: "1", name: "test1", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "2", name: "test2", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "3", name: "test3", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "4", name: "test4", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "5", name: "test5", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "6", name: "test6", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "7", name: "test7", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "8", name: "test8", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"}];
      this.setData({
        hotBrands: hotBrands
      });
  }
})

7.页面page.json

{
  "usingComponents": {
    "image-text-vertical": "../components/image-text-vertical/image-text-vertical"
  }
}