【uni-app】小程序使用UI组件整理（三）

uni-app的UI组件部分

1. image标签，当src是需要判断的数据时，使用:src="url"失败
2. video标签：使用本地视频地址读取失败
3. swiper进行数列滚动并要求每五个滚动一次
4. scroll-view的scroll-top无法滚动到指定位置

uView组件部分

1. icon无法进行位置调整
2. Popup 弹出层，嵌入组件中使用时，弹出失败

uni-app的UI组件部分

1. image标签，当src是需要判断的数据时，使用:src="url"失败

解决办法：使用require引入图片

<image :src="require('@/static/images/'+ (flag ? 'arrow-down' : 'arrow-right') +'.png')"></image>

现象：当在循环中的使用image标签，并且标签中需要循环的index判断时，会报index的错误

解决办法：在方法中传入index进行返回值

<view v-for="(item,index) in list" :key="index">
	<image class="image" :src="require('@/static/images/bg-'+ getCurrentBg(index) +'.png')">
</view>

2. video标签：使用本地视频地址读取失败

现象：当读取的地址时本地地址时，报错 MEDIA_ERR_SRC_NOT_SUPPORTED

解决办法: 没有解决

目前的处理办法是：使用网络地址

3. swiper进行数列滚动并要求每五个滚动一次

需求：每五个滚动一次，并且当数据不是五的倍数时，每次滚动仍按照五进行滚动

解决办法：文档中的swiper只能记录当前指向的下标，并且改变事件只能监听到滚动后，因此先关掉了swiper的自动滚动，并手动加入滚动操作，当数据不是五的倍数时补全数据并给一个变量isEmpty去判断是补全数据

<swiper  :display-multiple-items="swiper.multipleItems" :current="swiper.current">

swiper:{
 current: 0,
 multipleItems: 5,
}
changeCurrent(){
	  // 补全
      let itemCount = this.swiper.multipleItems - (this.list.length % this.swiper.multipleItems)
      if(itemCount !== this.swiper.multipleItems){
        for (let i = 0; i < itemCount; i++) {
          this.list.push({id: new Date().getTime(),isEmpty:true})
        }
      }
      // 修改current改变当前指向进行滚动
      setInterval(()=>{
        this.swiper.current = this.swiper.current + this.swiper.multipleItems ;
        if(this.swiper.current >= this.list.length){
          this.swiper.current = 0;
        }
      },3000)
    },

4. scroll-view的scroll-top无法滚动到指定位置

现象：业务中的scroll-view的使用在uView中的tabs中，当在某个tab中进行了滚动之后，切换tab需要将scroll-view滚动到顶部而不是上一个tab滚动的地址，根据文档使用scroll-top之后无效

解决办法：scroll-view的scroll-top需要是一个一直变动的值，当保持一个值时，无法进行滚动，因为每次在改变tab时先给赋一个其他值再改为0

changeCurrentTab(index){
	this.currentTab = index
	this.scrollTop = -1
	this.$nextTick(function() {
	  this.scrollTop = 0
	})
},

uView组件部分

1. icon无法进行位置调整

现象：根据文档应该是可以进行图片与文字的位置选择，但各种尝试之后，之只能进行左边图右边文字的展示

解决办法：没有解决，可能是我打开的方式不对，也可能是版本不够

目前的处理办法是：当业务场景需要改变图片与文字文字位置时，不使用icon中的label

2. Popup 弹出层，嵌入组件中使用时，弹出失败

现象：提取popup为公共组件弹出时，进行变量控制，弹出失败

解决办法：没有解决

目前的处理办法是：使用uni-app的popup弹出层