uni-app 之 scroll-view和swiper
<!-- vue2的<template>里必须要有一个盒子,不能有两个,这里的盒子就是 view-->
<template>
<view>
<navigator url="/pages/home/home">
<button style="background: #ff00ff; color: aqua;">跳转到新页面</button>
</navigator>
<view>
Vertical Scroll
<text>\n纵向滚动</text>
</view>
<view @tap="goTop">
点击这里返回顶部
</view>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view id="demo1" style="background: #fff000;" class="scroll-item-y 1">A</view>
<view id="demo2" style="background: #00ff00;" class="scroll-item-y 2">B</view>
<view id="demo3" style="background: #aa00aa;" class="scroll-item-y 3">C</view>
</scroll-view>
</view>
<view>
Horizontal Scroll
<text>\n横向滚动</text>
</view>
<view>
<scroll-view class="scroll-h" scroll-x="true">
<view id="demo1" style="background: #fff000;" class="scroll-item-h 1">A</view>
<view id="demo2" style="background: #00ff00;" class="scroll-item-h 2">B</view>
<view id="demo3" style="background: #aa00aa;" class="scroll-item-h 3">C</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
<style lang="scss">
.scroll-y {
height: 300rpx;
.scroll-item-y {
height: 200rpx;
line-height: 200rpx;
text-align: center; // 元素居中
font-size: 36rpx;
}
}
.scroll-h {
white-space: nowrap;
width: 100%;
height: 300rpx;
.scroll-item-h {
display: inline-block;
width: 80%;
height: 100%;
line-height: 300rpx;
text-align: center; // 元素居中
font-size: 36rpx;
}
}
</style>
swiper 轮播图
//indicator-dots="ture"小圆点,
//autoplay="ture"自动轮播,
//interval="1000"跳转时间,
//circular="ture"是否采用衔接滑动,即播放到末尾后重新回到开头
<swiper style="width: 100%; height: 500rpx;" indicator-dots="ture" autoplay="ture" interval="1000"
circular="ture">
<swiper-item>
<view class="swiper-item 1">A西湖龙井</view>
<image
src="https://img2.baidu.com/it/u=2377761094,931944803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
</image>
</swiper-item>
<swiper-item>
<view class="swiper-item 2" style="text-align: center;">B洞庭碧螺春</view>
<image
src="https://img0.baidu.com/it/u=1273610305,982475941&fm=253&fmt=auto&app=120&f=JPEG?w=501&h=500">
</image>
</swiper-item>
<swiper-item>
<view class="swiper-item 3" style="text-align: right;">C信阳毛尖</view>
<image src="https://img2.baidu.com/it/u=769633489,863861704&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
</image>
</swiper-item>
</swiper>