首页 > 其他分享 >scroll-view和swiper的使用

scroll-view和swiper的使用

时间:2023-03-01 20:56:31浏览次数:38  
标签:height width 111 background 220rpx scroll swiper view

源码:

<template>
    
        <viex class="out">    
        <view class="box">div</view>
        <view class="block"></view>
        <icon type="success" size="26"></icon>
        <icon type="waiting" size="26"></icon>
        <view>uniapp</view>
        <view>web前端开发</view>
        <text user-select selectable=>nodejs span</text>
        <text space="emsp" decode>vue</text>
        <scroll-view class="scroll" scroll-x scroll-y>
            <view class="group">
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
            </view>
        </scroll-view>
        <swiper class="swiper" circular autoplay interval="3000" duration="1000">
            <swiper-item class="item">
                <image src="../../static/25-1G115103JD30.jpg" mode=""></image>
            </swiper-item>
            <swiper-item class="item">
                <image src="../../static/165804312036816580431202.jpg" mode=""></image>
            </swiper-item>
            <swiper-item class="item">
                <image src="../../static/logo.png" mode=""></image>
            </swiper-item>
        </swiper>
            
            </viex>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss">
    .out{
        .box{
            width: 200rpx;
            height: 220rpx;
            background:pink;
        }
        .block{
            width: 750rpx;
            height: 200rpx;
            background-color: black;
            
        }
        
    }
    .scroll{
        height: 100rpx;
        width: 220rpx;
        border: 1px solid red;
        box-sizing:border-box;
        .group{
            white-space: nowrap;
            .item{
                width: 220rpx;
                height: 220rpx;
                background-color: royalblue;
                display: inline-block;
                margin-right: 10rpx;
            }
        }
    }
    .swiper{
        
    }
    
</style>

属性:

swiper:属性:image

标签:height,width,111,background,220rpx,scroll,swiper,view
From: https://www.cnblogs.com/lin513/p/17169731.html

相关文章

  • QT QGraphicsView 如何实现图片按照鼠标点进行放大缩小效果
    原文链接#include<QScrollBar>//获取当前鼠标相对于view的位置;QPointFcursorPoint=event->pos();//获取当前鼠标相对于scene的位置;......
  • 基于 Docker Compose 安装 ElasticView
    1、Docker安装参考:https://www.cnblogs.com/a120608yby/p/9883175.html2、DockerCompose安装参考:https://www.cnblogs.com/a120608yby/p/14582853.html3、服务......
  • atom 安装markdown-preview-enhanced插件
    atom自带markdown的支持,但是不够智能,例如每个md文件都要手动打开预览,这个插件切换文件的时候,也会自动切换预览。install插件​​markdown-preview-enhanced​​ctrl+shi......
  • 软件工程日报六——TextView和button
    今天继续学习安卓stduio的知识——TextView和buttonTextView是安卓stduio中十分重要的一个控件,它可以在安卓应用上显示文字 通过网络我找到了TextView的相关用法如下:......
  • iview中刷新页面的时候更新导航菜单的active-name
    在做项目的时候,遇到一个问题,当刷新页面的时候,导航的激活菜单和当前显示的组件不匹配,查了一下官网(​​https://www.iviewui.com/components/menu​​),寥寥几句话就说完了,至于......
  • 小程序动态增加删除view
    wxml文件:<viewclass="page"data-weui-theme="{{theme}}"><viewclass="weui-form"><viewclass="weui-form__text-area"><h2class="weui-form__title">联营......
  • Element.scrollIntoView
    文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewElement 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()......
  • 模仿新浪微博的listview更多分页按钮(原创)
    因为百事查需要,需要制作这样的更多分页按钮,因为感觉新浪微博的更多分页按钮比较好,就尝试做了一下。1、首先需要考虑布局,就是footer的布局,如下:<?xmlversion="1.0"encoding......
  • Delphi:利用TreeView 的data属性存储相关数据
    Delphi:利用TreeView的data属性存储相关数据TreeView利用data属性存储相关数据在Delphi中,TreeView控件是一款很出色而且很常用的控件。在使用过程中,了解到其TTreeNod......
  • android textview 中超出屏幕宽度的字符 省略号显示
    当利用textview显示内容时,显示内容过多可能会折行或显示不全,那样效果很不好。今天发现androidapi中已经给出自动省略的功能。实现如下:<TextViewandroid:layout_width="fil......