uni-app 之 scroll-view和swiper

Bertha 。 2023-10-15 15:57 7阅读 0赞

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

--------------------

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