<template>
<view class="pages">
<view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>
<view class="status-bar-fix" :style="{ height: iStatusBarHeight + 'px'}"></view>
<view class="tab_fix" :style="{ top: iStatusBarHeight}">
<text class="tab_text" @click="toSwiper(0)">精选</text>
<text class="tab_text" @click="toSwiper(1)">手机</text>
<text class="tab_text" @click="toSwiper(2)">电脑</text>
<text class="tab_text" @click="toSwiper(3)">家电</text>
<text class="tab_text" @click="toSwiper(4)">其他</text>
</view>
<swiper class="swiper" @change="swiperChange" :current="swiperIndex">
<swiper-item :style="{ backgroundColor:'#3d3d3d'}">
<swiper class="hot_swiper" circular @change="swiperChange2" indicator-dots indicator-color="rgba(248, 248, 248, .3)" indicator-active-color="#f8f8f8">
<swiper-item class="hot_swiper_item">
</swiper-item>
</swiper>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight:0//nvue页面获取状态栏高度
}
},
onLoad() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
},
mounted() {
},
onUnload(){
},
methods: {
}
}
</script>
<style>
.pages{
width: 750rpx;
background-color: #f8f8f8;
color: #333333;
}
.status-bar{
width: 100%;
background-color: #f8f8f8;
}
.status-bar-fix{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #f8f8f8;
}
.tab_fix{
width: 100%;
height: 54rpx;
padding: 30rpx 0 48rpx 0;
flex-direction: row;
position: fixed;
left: 0;
background-color: #f8f8f8;
z-index: 1000;
}
.tab_text{
width: 150rpx;
height: 54rpx;
line-height: 54rpx;
text-align: center;
font-size: 30rpx;
}
.tab_active{
font-size: 32rpx;
font-weight: 800;
}
.tab_block{
position: absolute;
height: 4rpx;
width: 54rpx;
bottom: -40rpx;
transition: left .3s;
}
.swiper{
width: 750rpx;
height: 750rpx;
margin-top: 132rpx;
justify-content: center;
align-items: center;
}
.hot_swiper{
margin-bottom: 44rpx;
width: 750rpx;
height: 400rpx;
background-color: #f9385b;
}
.hot_swiper_item{
position: absolute;
top: 50rpx;
left: 50rpx;
width: 450rpx;
height: 300rpx;
background-color: #e2923d;
}
</style>
- 发布:2020-06-17 11:09
- 更新:2020-06-22 09:28
- 阅读:2755
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.4
HBuilderX类型: 正式
HBuilderX版本号: 2.7.13
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphone8
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
模拟器,真机都已测试
模拟器,真机都已测试
预期结果:
能够自定义swiper-item的宽度,能使用绝对定位自定义swiper-item的位置
能够自定义swiper-item的宽度,能使用绝对定位自定义swiper-item的位置
实际结果:
宽度一直为父元素的100%宽度,绝对定位不起作用
宽度一直为父元素的100%宽度,绝对定位不起作用
bug描述:
nvue编译方式为uni-app,swiper-item的宽度自动为swiper的100%,设置width没有作用,也无法使用position: absolute 属性定义swiper-item的位置。
s***@163.com (作者)
在vue中swiper-item是可以自定义宽高以及定位的,nvue就完全失效了
2020-06-22 09:28