uni-app组件、网络请求

swiper轮播图

滑块视图容器。一般用于左右滑动或上下滑动,比如banner轮播图,注意是滑动切换而不是滚动。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。

属性说明
* indicator-dots:是否显示面板指示点
* autoplay :是否自动切换
* interval :自动切换时间间隔

实例:

<swiper indicator-dots="true" autoplay="true" interval="1500" @change="test">
       <swiper-item>
             <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
        </swiper-item>
        <swiper-item>
             <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
        </swiper-item>
        <swiper-item>
             <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
        </swiper-item>
</swiper>

在这里插入图片描述

scroll-view

可滚动视图区域
补充:不换行:white-space: nowrap
scroll-view属性:
* scroll-x :允许横向滚动
* scroll-y :允许纵向滚动
* scroll-into-view :值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
* scroll-with-animation :在设置滚动条位置时使用动画过渡
* @scrolltolower :滚动到底部/右边,会触发 scrolltolower 事件
* @scroll :滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
实例:可以左右滑动的模块

<scroll-view scroll-x="true" style="border: 1px solid #2C405A;white-space: nowrap;">
          <view id="demo1" style="display:inline-block;width:200px;height:100px;backgroundcolor:red">A</view>
          <vi
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值