当前位置：首页 > news >正文

uni-app 之 scroll-view和swiper

news 2025/9/7 8:41:08

<!-- 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.scrollTopthis.$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><imagesrc="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><imagesrc="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>

查看全文

http://www.lryc.cn/news/155405.html