weex踩坑記錄(4)

1、weex中默認的css樣式不要寫:

display,
position: relative,

2、color屬性都寫全,不然爆出警告(這個可能跟項目的配置有關(guān))
color: #fff; -> color: #ffffff;

3、align-self: center;的替換方案:
1、在元素的外層加一個div標簽,然后對該div設(shè)置居中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
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 移動開發(fā)基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,711評論 0 6
  • weex vue ios 原生 app 會不定時更新 img標簽應(yīng)為 ,路徑不能引用本地靜態(tài)文件 Android...
    warryy閱讀 5,879評論 2 2
  • 關(guān)于css常見問題,大多是移動端的。 簡單的排版規(guī)則:條目與條目之間空兩行,每條內(nèi)容部分分段空一行。標點符號全部用...
    蘇水兒閱讀 5,155評論 0 9
  • 第一章 復(fù)雜選擇器 一、兄弟選擇器:具備相同父元素的元素 ① 特點:1、通過位置關(guān)系來匹配元素(平級關(guān)系) ...
    fastwe閱讀 856評論 0 0
  • flex 布局是 css3 中使用最頻繁也是最出色的功能,有點復(fù)雜,分為應(yīng)用在容器上的屬性和項目上的屬性,即父元素...
    rayman_v閱讀 956評論 1 4

友情鏈接更多精彩內(nèi)容