swiper组件
 
swiper
scroll-view
slider

 
swiper
 
官网
 https://uniapp.dcloud.io/component/swiper?id=swiper
 
<swiper :indicator-dots="true" :autoplay="true" 
	  :interval="3000" :duration="1000"
	  indicatorcolor="rgba(255,255,255,0.5)"
	  indicator-active-color="#ff372b"
	  class="swiper">
	 <swiper-item>

     </swiper-item>
</swiper>
 
一些参数的解释
 indicator-dots //控制面板是否显示小圆点
 autoplay //自动切换
 interval //切换间隔的时间
 duration // 切换轮播时，话费的时间
 indicatorcolor//小圆点的默认颜色
 indicator-active-color//被选中图片对应小圆点的颜色
 interval//自动切换的间隔时间
 duration//滑动过程中话费的时间
 
scroll-view
 
https://uniapp.dcloud.io/component/scroll-view?id=scroll-view
 
<scroll-view class="scroll-view" scroll-x show-scrollbar>
</scroll-view> //scroll-x 控制滑动的方向
//show-scrollbar 控制是否显示滚动条
 
slider
 
https://uniapp.dcloud.io/component/slider?id=slider
 
<slider @change="sliderChange" class="line flex-item" :value="curPlayTime" min="0" 
block-size="15" backgroundColor="rgba(255,255,255,.5)" :max="playTime" activeColor="rgba(255,255,255,.5)"/>
 
min //最小值0
 max // 总时间，最大值
 value // 当前值
 block-size //滑块的大小，取值范围为 12 - 28
 backgroundColor //背景颜色
 activeColor // 滑块左侧已选择部分的线条颜色
 change// 滑块拖动时触发

uniapp swiper高度自适应
 
  <swiper @change="change"  style="min-height:100vh;">
   简单吧！

// 布局一下高度为动态的
 
 
<swiper 
  class="swiper" 
  :style="{height: windowHeight + 'px'}"
  :current="currentTab"
  @change="onSwiperChange">
<swiper>
 
data() {
  return {                       
    windowHeight: '',  // 页面高度          
  }
},

methods:{
	init() {
	const res = uni.getSystemInfoSync();
    this.windowHeight = res.windowHeight;
	}
}

this.$nextTick(() => {
	//获取节点代码
	var query = uni.createSelectorQuery();
	//获取节点
	      
    query.select(`.news-box-${currentTab}`).boundingClientRect(res => {
     //判断是否未true
     if (res) {
     //当前元素高度
     this.windowHeight = res.height;
     //页面高度+循环体高度等于总高度
     }
   }).exec();
  })

**
 
uniapp使用wxs如何手写swiper
 
**
 
了解wxs
 
WXS是小程序的一套脚本语言。
 具体api:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
 官方实例：https://uniapp.dcloud.io/frame?id=wxs
 
创建wxs
 
再vue文件新建script标签
 module就是自己定义的一个模块名
 
结构
 
 
html部分
 
<view class="header">
		<u-sticky offset-top="0">
			<u-tabs :list="swiperList" active-color="#333333" inactiveColor='#666666' :is-scroll="false"
				:current="swiperCurrent" @change="change" font-size="28"></u-tabs>
		</u-sticky>
		<view style="overflow: hidden;width: 750rpx;">
			<!-- swiper -->

			<!-- 移动端宽度750rpx，多少个swiper列表就*几-->
			<!-- 这里用的是定位来实现(有些场景swiper里会用到吸顶效果，吸顶用的定位来实现，但uni用的transition来实现，transition和定位会有冲突，具体原因百度) -->
			<!-- touch就是你定义的模块.释放的方法-->
			<!-- :prop='swiperCurrent'wxs派发swiperCurrent方法 -->
			<view id='swiper' style="overflow: hidden;display: flex;position: relative;"
				:style="{'width':winWidth*2+'rpx'}" @touchstart="touch.touchstart"
				@touchmove="touch.touchmove" @touchend="touch.touchend" :prop='swiperCurrent'
				:change:prop='touch.change'><!-- 监听 -->
				<!-- 组件1 -->
				<view style="width: 750rpx;">
					<img-list ref="one"></img-list>
				</view>
				<!-- 组件2 -->
				<view style="width: 750rpx;">
					<img-list-two ref='two'></img-list-two>
				</view>
			</view>
		</view>
	</view>
 
wxs部分
 
let startX = 0 // 触摸起始点
	let startY = 0
	let distanceX = 0 //结束点
	let distanceY = 0
	let translateX = 0 //移动x轴位置
	let isMove = false //是否移动开关
	let index = 0
	let width = uni.getSystemInfoSync().windowWidth //屏幕宽度
	//结束定位
	function addLeft(ins, xwidth) {
		ins.selectComponent('#swiper').setStyle({
			'transition': 'all .3s',
			// 'transform': `translateX(${xwidth}px)`
			'left': `${xwidth}px`
		})
	}
	//移除定位
	function removeLeft(ins) {
		ins.selectComponent('#swiper').setStyle({
			'transition': 'none'
		})
	}
	//移动
	function setLeftX(ins, xwidth) {
		ins.selectComponent('#swiper').setStyle({
			'left': `${xwidth}px`,
			'transition': 'none'
		})
	}
	//监听外部changeSwiper方法
	function change(newValue, oldValue, ownerInstance, instance) {
		index = newValue
		addLeft(ownerInstance, -index * width)
		ownerInstance.callMethod('changeSwiper', index)
	}
	//触摸开始
	function touchstart(event, ins) {
		let touch = event.touches[0] || event.changedTouches[0]
		startX = touch.pageX
		startY = touch.pageY
		// event.preventDefault();
	}
	//触摸移动
	function touchmove(event, ins) {
		let touch = event.touches[0] || event.changedTouches[0]
		let moveX = touch.pageX
		let moveY = touch.pageY
		distanceX = moveX - startX
		distanceY = moveY - startY
		translateX = -index * width + distanceX
		if ((distanceX < 0 && index === 0) || (distanceX > 0 && index === 1)) {
			removeLeft(ins)
			setLeftX(ins, translateX)
			isMove = true
		}

	}
	//触摸结束
	function touchend(event, ins) {
		let touch = event.touches[0] || event.changedTouches[0]
		if (isMove) {
			if (Math.abs(distanceX) > width / 4) {
				// 切换
				if (distanceX > 0) {
					index = 0
				} else {
					index = 1
				}
			}
			addLeft(ins, -index * width)
			ins.callMethod('changeSwiper', index)
		}
		startX = 0;
		distanceX = 0;
		isMove = false;
	}
	//导出模块
	module.exports = {
		change: change,
		touchend: touchend,
		touchstart: touchstart,
		touchmove: touchmove
	}
 
js部分(可以动态计算组件高度赋值，也可以用scroll-view)
 
<script>
	import imgList from './components/imgList.vue'
	import imgListTwo from './components/imgList2.vue'
	export default {
		components: {
			imgList,
			imgListTwo
		},
		data() {
			return {
				winWidth: 750,
				swiperList: [{
						name: '0'
					},
					{
						name: '1'
					}
				],
				swiperCurrent: 0,
				headerHight: 0
			}
		},
		computed: {
			//px转成rpx
			stickyHeight() {
				return Math.floor(Number(this.headerHight) / (uni.upx2px(Number(this.headerHight)) / Number(this.headerHight)))
			},
		},
		onReady() {
			this.$nextTick(() => {
				
			})
		},
		methods: {
			getHight() {
				setTimeout(()=>{
					if (this.swiperCurrent === 0) {
						this.headerHight = this.$refs.one.headerHight
					} else {
						this.headerHight = this.$refs.two.headerHight
					}
				},1000)

			},
			change(index) {
				this.swiperCurrent = index
			},
			//wxs监听的方法
			changeSwiper(index) {
				this.swiperCurrent = index
				/* if (index === 0) {
					this.$refs.one.getHight()
					this.headerHight = this.$refs.one.headerHight
				} else {
					this.$refs.two.getHight()
					this.headerHight = this.$refs.two.headerHight
				} */
			}
		}
	}
</script>
 
组件
 
<template>
	<view class="list">
		<scroll-view scroll-y style="height: 100vh;">
			<view v-for="(item,index) in 10" :key='index'>
				<image style="width: 200rpx;height: 200rpx;"
					src="https://files.yzsheng.com/AccountDefaultImg/HeadPortrait.png">
				</image>
				<text>{{index+1}}</text>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	export default {
		data(){
			return{
				headerHight:0
			}
		},
		methods:{
			getHight() {
				//组件
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.list').boundingClientRect(data => {
						this.headerHight = data.height
						console.log(data.height,'高度1')
					}).exec()
				})
			
			},
		}
	}
</script>

<style>
</style>