wx：scroll-view横向滚动 - 回到顶部 - 图片预览 - 图片src转base - 本地图片设为背景图片

1.scroll-view横向滚动

<scroll-view scroll-x="true" >
	<view class="item-item">
	view>
	<view class="item-item">
	view>
	<view class="item-item">
	view>
scroll-view>

scroll-view{
	white-space:nowrap;
}
.item-item{
	display:inline-flex;
}

标签位置

2.回到顶部

说明：当监听到list发生改变时，
this.scrollTop = 0 重新渲染视图
当渲染完成，更改滚动条位置

3.wx图片预览

<swiper :indicator-dots="false" :vertical="true" :current-item-id="thisCurrent"  @change="getCurrent" class="swiper_box">
	<swiper-item class="swiper_item" v-for="(item,i) in detailData" :key="i" :item-id="i">
		<image :src="getImage($staticAliURL+item.image, 'icon')" mode="" @tap="perImage()">image>
	swiper-item>
swiper>

<view class="swiper_dot">
	<view v-for="(item,it) in detailData" :key="it" 
		:class="thisCurrent==it?'dotClass':''"
		@tap="changeImage(it)">
	view>
view>

// 预览 detailData为图片数组
perImage(){
	let arr = [];
	for(let i in this.detailData){
		arr.push(this.$staticAliURL + this.detailData[i].image)
	}
	uni.previewImage({
		current: this.thisCurrent, //预览图片的下标
		urls: arr
	})
},
// 手动切换小圆点
changeImage(it){
	this.thisCurrent=it
},
// 滑动内容切换小圆点
getCurrent(event){
	this.thisCurrent=event.detail.current
}

4.图片src转base

参考：https://blog.csdn.net/qq_36875339/article/details/81086205

5.本地图片设为背景图片

		<view class="header" :style="{backgroundImage:`url(${img2})`}">view>

	  import img1 from "@/static/vip/newvip.png"
	
	  data中
			img1:img1,
	注：图片大小不能超过400