<template>
<view class="bg">
<view class="banner">
<view class="uni-margin-wrap">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:current="sIndex" :duration="duration">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<view class="swiper-item">
<view class="img" :style="{'background-color': item}"></view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sIndex: 0,
indicatorDots: false,
autoplay: false,
interval: 3000,
duration: 100,
bannerList: [
'#fff',
'#000'
],
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.bg{
background-color: #eeecf9;
min-height: 100vh;
padding-top: 10vh;
box-sizing: border-box;
}
.banner{
width: 90%;
height: 25vh;
}
.uni-margin-wrap {
width: 100%;
height: 100%;
}
.swiper {
height: 100%;
}
.swiper-item {
height: 100%;
}
.img{
width: 100%;
height: 100%;
}
</style>
- 发布:2023-02-16 14:08
- 更新:2023-02-17 11:17
- 阅读:582
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 教育版 21H2 19044.2604
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
第三方开发者工具版本号: Stable 1.06.2209190
基础库版本号: 2.30.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
- Hbuilder 新建 uniapp 项目 默认模板 vue2
- 将代码示例 全选 覆盖粘贴到项目下 pages/index/index.vue 该文件
- 运行项目至微信开发者工具,切换至 iPhone X 机型查看
- Hbuilder 新建 uniapp 项目 默认模板 vue2
- 将代码示例 全选 覆盖粘贴到项目下 pages/index/index.vue 该文件
- 运行项目至微信开发者工具,切换至 iPhone X 机型查看
预期结果:
如附件所示
如附件所示
实际结果:
如附件所示
如附件所示
2***@qq.com (作者)
很感谢您的回答,我想再请问一下,这个算是swiper组件内百分比宽度计算精准度(百分比转具体px?)的问题吗,我个人目前的猜测,因为如果都按照css的百分比解析应该不会有问题的吧
2023-02-20 11:56
1***@163.com
回复 2***@qq.com: 我也遇到了这个情况了, 你后来解决了吗?咋解决的?
2023-05-16 13:25
2***@qq.com (作者)
回复 1***@163.com: 这个社区我没怎么上(捂脸笑),上面是我的猜测,百分比转的px可能有误差,后面就是像楼主说的调整到看不到黑边,目前暂时没有去做细致的调整
2023-06-01 15:50