1、weex中默认的css样式不要写:
display,
position: relative,
2、color属性都写全,不然爆出警告(这个可能跟项目的配置有关)
color: #fff; -> color: #ffffff;
3、align-self: center;的替换方案:
1、在元素的外层加一个div标签,然后对该div设置居中flex布局: justify-content: center; align-items: center
2、如果该元素有固定的宽度: margin-left: (750 - 元素的宽度) / 2
4、自定义slider的指引器
<slider class="banner-slider" auto-play="true" interval="3000" @change="getSliderIndex">
<div v-for="(banner, index) in data.bannerList" :key="index" >
<image class="banner-slider-image" @load="onImageLoad" :resize="data.effect === 2 ? 'cover' : 'contain'" :src="banner.src"></image>
<text class="banner-slider-title">{{banner.title}}</text>
</div>
<!-- <indicator class="banner-slider-indicator" v-if="data.effect === 2 && data.bannerList.length > 1"></indicator> -->
</slider>
<!-- 自定义indicator -->
<div class="custom-indicator-box">
<div class="custom-indicator" :class="[index === currentSliderIndex ? 'custom-indicator-active': '']" v-for="(banner, index) in data.bannerList" :key="index"></div>
</div>
.banner-slider-indicator {
position: absolute;
right: 10px;
bottom: 0;
height: 60px;
item-size: 20px;
item-color: #dddddd;
item-selected-color: #ffffff;
}
.custom-indicator-box {
position: absolute;
right: 10px;
bottom: 0;
height: 60px;
flex-direction: row;
}
.custom-indicator {
width: 20px;
height: 20px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
background-color: transparent;
margin-right: 5px;
}
.custom-indicator-active {
background-color: #ffffff;
}
.banner-slider-title {
width: 750px;
position: absolute;
left: 0;
bottom: 0;
padding: 0 80px;
font-size: 20px;
line-height: 32px;
text-align: center;
color: #ffffff;
background-color: rgba(102, 102, 102, 0.8);
overflow: hidden;
text-overflow: ellipsis;
lines: 1;
}
onImageLoad (event) {
...
},
getSliderIndex (e) {
this.currentSliderIndex = e.index
}
网友评论