提交 fc16aff4 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng

更新image示例

上级 8b066d03
...@@ -109,6 +109,12 @@ ...@@ -109,6 +109,12 @@
"navigationBarTitleText": "image-path" "navigationBarTitleText": "image-path"
} }
}, },
{
"path": "pages/component/image/image-large",
"style": {
"navigationBarTitleText": "image-large"
}
},
{ {
"path": "pages/component/web-view/web-view", "path": "pages/component/web-view/web-view",
"style": { "style": {
......
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">大图示例</text>
</view>
<view class="uni-common-mt" v-for="_ in 10">
<text class="uni-subtitle-text">width={{width}}px height={{height}}px memory={{memory}}MB</text>
<image class="image" mode="widthFix" :src="src" @load="load"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'image-large',
src: 'https://native-res.dcloud.net.cn/uni-app-x/static/img/building.jpg',
width: 0,
height: 0,
memory: 0
}
},
methods: {
load(event : ImageLoadEvent) {
this.width = event.detail.width;
this.height = event.detail.height;
this.memory = Math.round(this.width * this.height * 4 / 1024 / 1024 * 100) / 100;
}
}
}
</script>
<style>
.image {
width: 100%;
}
</style>
\ No newline at end of file
...@@ -15,6 +15,9 @@ ...@@ -15,6 +15,9 @@
<view class="uni-btn-v"> <view class="uni-btn-v">
<button type="primary" @tap="imagePath">图片路径示例</button> <button type="primary" @tap="imagePath">图片路径示例</button>
</view> </view>
<view class="uni-btn-v">
<button type="primary" @tap="imageLarge">大图示例</button>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -46,6 +49,11 @@ ...@@ -46,6 +49,11 @@
uni.navigateTo({ uni.navigateTo({
url: '/pages/component/image/image-path' url: '/pages/component/image/image-path'
}); });
},
imageLarge() {
uni.navigateTo({
url: '/pages/component/image/image-large'
});
} }
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册