swiper: support fallbackImg for prop:list (ref #1923)

airyland · Sep 12, 2017 · 5de9949 · 5de9949
1 parent 2ef24d6
commit 5de9949
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 18 deletions.
diff --git a/src/components/swiper/metas.yml b/src/components/swiper/metas.yml
@@ -2,6 +2,24 @@ icon: '&#xe612;'
 extra: |
   <p class="tip">
     `list`为图片列表快捷设置，如果你需要自定义一些样式，或者内容并不为纯图片，可以引用`swiper-item`组件来自定义。
+    <br>
+    `list` 格式如下
+    <br>
+    ``` js
+    [{
+      url: 'javascript:',
+      img: 'https://static.vux.li/demo/1.jpg',
+      title: '送你一朵fua'
+    }, {
+      url: 'javascript:',
+      img: 'https://static.vux.li/demo/5.jpg',
+      title: '送你一次旅行',
+      fallbackImg: 'https://static.vux.li/demo/3.jpg'
+    }]
+    ```
+    <br>
+    `fallbackImg` 在 `v2.5.13` 支持，它将在 `img` 加载失败时显示，注意的是 `fallbackImg` 可能会在 `img` 加载成功时也进行了加载，只是不会显示（取决于浏览器实现）。
+
   </p>
   <p class="warning">
   不要在`swiper`里嵌套`scroller`，在`web`上过于复杂化而且手势会有冲突，相关`Issue`将不会处理。
@@ -85,6 +103,11 @@ props:
     en: index value, use `v-model` for binding
     zh-CN: index 绑定，使用`v-model`，一般不需要绑定
 changes:
+  next:
+    en:
+      - '[enhance] support fallbackImg for prop:list #1923'
+    zh-CN:
+      - '[enhance] 支持 list.fallbackImg 属性在图片加载失败时显示预设图片 #1923'
   v2.5.3:
     en:
       - '[fix] clear listTtwoLoopItem when list size !== 2 #1684 @weizs'

diff --git a/src/components/swiper/swiper.vue b/src/components/swiper/swiper.vue
@@ -2,20 +2,32 @@
   <div class="vux-slider">
     <div class="vux-swiper" :style="{height: xheight}">
       <slot></slot>
-      <div class="vux-swiper-item" v-for="(item, index) in list" @click="clickListItem(item)" :data-index="index">
+
+      <div
+      class="vux-swiper-item"
+      v-for="(item, index) in list"
+      @click="clickListItem(item)"
+      :data-index="index">
         <a href="javascript:">
-          <div class="vux-img" :style="{backgroundImage: buildBackgroundUrl(item.img)}"></div>
-          <p class="vux-swiper-desc" v-if="showDescMask">{{item.title}}</p>
+          <div class="vux-img" :style="{backgroundImage: buildBackgroundUrl(item)}"></div>
+          <p class="vux-swiper-desc" v-if="showDescMask">{{ item.title }}</p>
         </a>
       </div>
-      <div v-if="listTwoLoopItem.length > 0" class="vux-swiper-item vux-swiper-item-clone" v-for="(item, index) in listTwoLoopItem" @click="clickListItem(item)" :data-index="index">
+
+      <div
+      v-if="listTwoLoopItem.length > 0"
+      class="vux-swiper-item vux-swiper-item-clone"
+      v-for="(item, index) in listTwoLoopItem"
+      @click="clickListItem(item)"
+      :data-index="index">
         <a href="javascript:">
-          <div class="vux-img" :style="{backgroundImage: buildBackgroundUrl(item.img)}"></div>
-          <p class="vux-swiper-desc" v-if="showDescMask">{{item.title}}</p>
+          <div class="vux-img" :style="{backgroundImage: buildBackgroundUrl(item)}"></div>
+          <p class="vux-swiper-desc" v-if="showDescMask">{{ item.title }}</p>
         </a>
       </div>
+
     </div>
-    <div :class="[dotsClass, 'vux-indicator', 'vux-indicator-' + dotsPosition]" v-show="showDots">
+    <div :class="[dotsClass, 'vux-indicator', `vux-indicator-${dotsPosition}`]" v-show="showDots">
       <a href="javascript:" v-for="key in length">
         <i class="vux-icon-dot" :class="{'active': key - 1 === current}"></i>
       </a>
@@ -56,8 +68,8 @@ export default {
       go(item.url, this.$router)
       this.$emit('on-click-list-item', JSON.parse(JSON.stringify(item)))
     },
-    buildBackgroundUrl (url) {
-      return `url(${url})`
+    buildBackgroundUrl (item) {
+      return item.fallbackImg ? `url(${item.img}), url(${item.fallbackImg})` : `url(${item.img})`
     },
     render (index = 0) {
       this.swiper && this.swiper.destroy()
@@ -100,7 +112,6 @@ export default {
       this.swiper && this.swiper.destroy()
     },
     getHeight () {
-      // when list.length > 0, it's better to set height or ratio
       const hasHeight = parseInt(this.height, 10)
       if (hasHeight) return this.height
       if (!hasHeight) {
@@ -135,10 +146,7 @@ export default {
       default: 'right'
     },
     dotsClass: String,
-    auto: {
-      type: Boolean,
-      default: false
-    },
+    auto: Boolean,
     loop: Boolean,
     interval: {
       type: Number,
@@ -173,8 +181,7 @@ export default {
       xheight: 'auto',
       length: this.list.length,
       index: 0,
-      // issue #1484 Fix click to fail
-      listTwoLoopItem: []
+      listTwoLoopItem: [] // issue #1484
     }
   },
   watch: {

diff --git a/src/demos/Swiper.vue b/src/demos/Swiper.vue
@@ -117,8 +117,9 @@ const baseList = [{
   title: '送你一辆车'
 }, {
   url: 'javascript:',
-  img: 'https://static.vux.li/demo/3.jpg',
-  title: '送你一次旅行'
+  img: 'https://static.vux.li/demo/5.jpg',
+  title: '送你一次旅行',
+  fallbackImg: 'https://static.vux.li/demo/3.jpg'
 }]
 
 const imgList = [