uni-app组件、网络请求

最新推荐文章于 2024-08-16 14:23:37 发布

li_yan_

最新推荐文章于 2024-08-16 14:23:37 发布

阅读量1.3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/li_yan_/article/details/104804172

版权

本文介绍了uni-app中的swiper轮播图组件和scroll-view滚动视图，详细讲解了各自的属性和用法，并提供了实例。此外，还阐述了uni.request的网络请求功能，包括不同的HTTP方法、数据类型转换规则等。

摘要由CSDN通过智能技术生成

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