vue采坑系列

vue-awesome-swiper动态数据渲染，loop无效，轮循无效

可以在swiper容器上加一个v-if判断一下，是否有数据加载

<template>
  <swiper :options="swiperOption" v-if="showSwiper">
    <!-- slides -->
    <swiper-slide v-for="item in swiperList" :key="item.id">
      <img class="swiperImg" :src="item.imageURL">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>
<script>
export default {
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: true,
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>

图片加载页面抖动的问题

可以为包裹图片的元素设置如下样式

height 0
overflow hidden
//图片的高宽百分比
padding-bottom 25.6%

vue中字符串格式的字符实体转化

json数据格式

      "navsTop": [{
        "id": "001",
        "title": "周边游",
        "iconfont": ""
      },{
        "id": "002",
        "title": "出境游",
        "iconfont": ""
      },{
        "id": "003",
        "title": "国内游",
        "iconfont": ""
      },{
        "id": "004",
        "title": "当地游",
        "iconfont": ""
      },{
        "id": "005",
        "title": "签证",
        "iconfont": ""
      },{
        "id": "006",
        "title": "Wi-Fi",
        "iconfont": ""
      }],

vue中可以用v-html指令来显示iconfont

<div class="itemImg text-center"><i class="iconfont colorWhite" v-html='item.iconfont'></i></div>

vue中使用better-scroll

npm安装

npm install better-scroll --save

在需要的页面引入

<script>
import BScroll from 'better-scroll'
export default {
  mounted () {
    // 在dom元素渲染完成之后初始化better-scroll的实例
    const scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

html模版
wrapper下必须用一个子元素包裹住所有的滚动内容

//ref属性可以获取dom元素
<template>
  <div class="list position wrapper" ref="wrapper">
    <div>
      <div class="listItem">
        <div class="title">您的位置</div>
        <ul class="whiteBg">
          <li>杭州</li>
        </ul>
      </div>
      <div class="listItem">
        <div class="title">A</div>
        <ul class="whiteBg">
          <li>澳门</li>
          <li>阿坝州</li>
          <li>阿克苏地区</li>
          <li>阿拉尔</li>
          <li>阿拉善盟</li>
          <li>阿里</li>
          <li>阿勒泰</li>
          <li>安康</li>
          <li>安庆</li>
          <li>鞍山</li>
          <li>安顺</li>
          <li>安阳</li>
        </ul>
      </div>
      <div class="listItem">
        <div class="title">A</div>
        <ul class="whiteBg">
          <li>澳门</li>
          <li>阿坝州</li>
          <li>阿克苏地区</li>
          <li>阿拉尔</li>
          <li>阿拉善盟</li>
          <li>阿里</li>
          <li>阿勒泰</li>
          <li>安康</li>
          <li>安庆</li>
          <li>鞍山</li>
          <li>安顺</li>
          <li>安阳</li>
        </ul>
      </div>
    </div>
  </div>
</template>

css

.list
    left 0
    right 0
    top 175px
    bottom 0
    overflow hidden

点击右侧字母滚动到对应的字母列表

右侧的字母列表中通过点击事件向父级传递点击的元素的字母值

<template>
  <div class="sideList position flex">
    <div v-for="(item,index) in cityList" :key="index" @click="listClick">{{item.code}}</div>
  </div>
</template>
methods: {
  listClick (e) {
  	//通过change事件向父组件传递参数
     this.$emit('change', e.target.innerText)
  }
}

父组件监听change事件接收到参数后再通过属性传递给城市列表组件

<template>
  <div>
    <city-header/>
    <city-list :cityList="cityList" :letter="letter"/>
    <city-sidelist :cityList="cityList" @change="handleCity"/>
  </div>
</template>


data () {
  return {
    cityList: [],
    letter: ''
  }
},
methods: {
	handleCity (letter) {
		this.letter = letter
	}
}

城市列表监听letter变量
通过给元素设置ref属性在js中通过$refs获取dom元素

<div class="listItem" v-for="item in cityList" :key="item.code" :ref="item.code">
   <div class="title">{{ item.code }}</div>
   <ul class="whiteBg">
      <li v-for="(item1,index) in item.cityList" :key="index">{{ item1 }}</li>
   </ul>
</div>
<script>
	import BScroll from 'better-scroll'
	export default {
	  props: {
	    cityList: Array,
	    letter: String
	  },
	  mounted () {
	    // 在dom元素渲染完成之后初始化better-scroll的实例
	    this.scroll = new BScroll(this.$refs.wrapper)
	  },
	  watch: {
	    letter () {
	      if (this.letter) {
	        const elem = this.$refs[this.letter][0]
	        this.scroll.scrollToElement(elem)
	      }
	    }
	  }
	}
</script>