uni-app 之 scroll-view和swiper

这篇具有很好参考价值的文章主要介绍了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"是否采用衔接滑动,即播放到末尾后重新回到开头文章来源地址https://www.toymoban.com/news/detail-696719.html

        <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>

到了这里,关于uni-app 之 scroll-view和swiper的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uni-app】uni-app中scroll-into-view的使用

    在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串 并且子组件的上绑定一个id值用于定位 以上就是今天要讲的内容,

    2024年02月11日
    浏览(46)
  • 小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

    Uniapp支持锚点连接,可以通过以下步骤实现锚点连接 一、在需要设置锚点的页面,为需要跳转的部分设置id属性。 例如,设置一个id为“section1”的元素: 二、在需要跳转到锚点的页面,使用 uni.navigateTo 或 uni.redirectTo 方法,搭配URL参数的方式实现跳转。 例如,跳转到id为“

    2024年02月14日
    浏览(55)
  • uniapp 小程序端使用uni-popup组件时,页面用了scroll-view滚动组件,uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案

    在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent=\\\"\\\" 和一个样式height: 100vh;    

    2024年02月10日
    浏览(57)
  • uniapp实战仿写网易云音乐(三)—视频页面(scroll-view组件实现横线滑动,mescroll-uni实现视频列表,向下滑动刷新当前页面)

    接着上篇文章继续完成剩下的部分,本篇文章是完成第二个页面——视频页面的部分,视频还是没有做播放的效果,主要是做展示效果。下面附上两篇文章链接,没看过的同学可以回头看看: uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现 uniapp实战仿写

    2023年04月25日
    浏览(44)
  • uniapp scroll-view横向滚动无效,scroll-view子元素flex布局不生效

    要素排查: 1.scroll-x属性需要开启,官方类型是Boolean,实际字符串也行。   2scroll-view标签需要给予一个固定宽度,可以是百分百也可以是固定宽度或者100vw。    3.子元素需要设置display: inline-block(行内块元素)属性,scroll-view需要设置white-space: nowrap(不换行) 当使用scroll

    2024年02月12日
    浏览(44)
  • scroll-view不能滚动问题

    js 确定你想实现的滑动方向,检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-view设置一个固定的高度,我就是之前没有设置固定高度导致无法滑动的(注意 设置的高度不要超过父容器的高度,否则如果高度多大

    2024年02月13日
    浏览(54)
  • uni-app:常见组件view、text、icon

    根据html:可知div是块级标签,span是行级标签 这里view类似于div,text类似于span,即 块级标签:view 行级标签:text、icon 类似效果  两个icon图标,置于第一排 两个view,分别位于第二排、第三排 两个text,置于第四排 代码

    2024年02月17日
    浏览(50)
  • uni-app web-view的使用

    在上一页点击需要跳转到app内置的浏览器里(app跳h5页面),uniapp提供了web-view 需要新建页面,在新页面里引用web-view,在新页面里才加上网址(h5) 1,在所需页面引入 1,在项目里(uni-app)运用(子传父) 3,html页面 https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

    2024年02月11日
    浏览(47)
  • uniapp scroll-view基础用法

            在uniapp日常开发的过程中经常会有局部滚动的需求,而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。         将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能,给scroll-view设置一个高度,当内容高

    2023年04月10日
    浏览(34)
  • #Uniapp:内置组件scroll-view

    内置组件 scroll-view 属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number/String 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower-threshold Number/String 50 距底部/右边多远时(单位px),触发 scrolltolower

    2024年01月24日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包