效果图：
代码：
<template>
<view class=”uni-tab-bar”>
<swiper class=”uni-swiper-tab” :style=”{height:swiperheight+’rpx’}” current=”1″>
<swiper-item class=”item-swiper” v-for=”item in swiperList”>
<image class=”swiper-img” :src=”item” mode=”aspectFit”></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiperheight:0,
swiperList:[
“../static/yyimg1.jpg”,
“../static/yyimg2.jpg”,
“../static/yyimg3.jpg”,
“../static/yyimg4.jpg”
]
}
},
onLoad() {
var _this = this
uni.getSystemInfo({
success(res) {
console.log(“屏幕高度 HH = ” + res.windowHeight)
console.log(“屏幕高度 HH222 = ” + res.windowHeight * 2)
_this.swiperheight = res.windowHeight * 2
}
})
},
methods: {
}
}
</script>
<style>
.swiper-img {
width: 100%;
height: 100%;
}
.item-swiper {
width: 100%;
}
.uni-swiper-tab {
width: 100%;
}
.uni-tab-bar {
color: #000000;
}
</style>
第二种是直接调用查看图片预览功能
// 图片预览功能
btnImgs:function(urls ,index){
uni.previewImage({
urls:urls,
current:index
})
}
参数说明：
btnImgs：按钮的点击事件。
urls：预览图片的集合。
index：预览图片开始打开的位置，默认0。
uni.previewImage：图片预览功能的api。
资源自己可以替换成自己的
最后是交流公众号，大家可以关注一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119152.html
