uni-app 之 scroll-view和swiper

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>
相关推荐
Ronin30535 分钟前
【C++】类型转换
开发语言·c++
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
mrbone111 小时前
Git-git worktree的使用
开发语言·c++·git·cmake·worktree·gitab
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
真实的菜1 小时前
JVM类加载系统详解:深入理解Java类的生命周期
java·开发语言·jvm
代码讲故事1 小时前
多种方法实现golang中实现对http的响应内容生成图片
开发语言·chrome·http·golang·图片·快照·截图
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
虾球xz2 小时前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习