开发者社区> 计算机魔术师> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【小程序】view视图,swiper轮播图,scroll-view滑动列表 (在线详细手册)

简介: 【小程序】view视图,swiper轮播图,scroll-view滑动列表 (在线详细手册)
+关注继续查看


1.gif

🎏【小程序开发】常用的视图容器类组件&基础内容组件

前言

👋👋欢迎来到👋👋

🎩魔术之家!!🎩

该文章收录专栏

✨— 2022小程序开发从入门到精通 —✨

专栏内容

✨— 【小程序 – 启航篇】一文打通任督二脉 —✨

书接上文 【小程序 – 启航篇】一文打通任督二脉 小程序宿主环境构成,上文已介绍了关于宿主环境的通信模式和运行机制,本文着重介绍关于宿主环境的视图容器和基础内容组件

宿主环境 - 组件

小程序中的组件是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:

  • ① 视图容器
    ② 基础内容
    ③ 表单组件
    ④ 导航组件
    ⑤ 媒体组件
    ⑥ map 地图组件
    ⑦ canvas 画布组件
    ⑧ 开放能力
    ⑨ 无障碍访问

视图容器类组件

view组件

介绍:

  • 普通视图区域(静态)
  • 类似与HTML的div标签,是一个块状元素
  • 常用于页面的布局效果

基本使用

实现如图的横向布局:

图片.png

<!-- 结构 -->
<view class="container">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
-----------------------------------我是一条分割线--------------------------------
/* 样式 */
.container {
    display: flex;
    justify-content: space-around;
}
.container view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
/* css3语法 */
.container view:nth-child(1) {
    background-color: lightcoral;   
}
.container view:nth-child(2) {
    background-color: lightcyan;
}
.container view:nth-child(3) {
    background-color: lightgoldenrodyellow;
}

scroll-view

介绍:

  • 可滚动的视图区域(动态)
  • 常用来实现列表滚动效果

纵向滚动效果实现

注意事项: 滑动效果中对整个区域的高度要小于滑动视图区域的总高度,且要在scroll-view组件中 加上 scroll-y

2.gif

图片.png

<!--结构-->
<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
------------------------------我是一条分割线---------------------------------------
/* 样式 */
.container {
    height: 150px;
    border: 3px solid black;
}
.container view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
/* css3语法 */
.container view:nth-child(1) {
    background-color: lightcoral;   
}
.container view:nth-child(2) {
    background-color: lightcyan;
}
.container view:nth-child(3) {
    background-color: lightgoldenrodyellow;
}
横向滚动效果实现

注意: 同样需要在scroll-view组件中加上 scroll-x , 最重要的是在样式设置 要加上 white-space: nowrap' 将其设置为 不自动换行,将后面的部分放在区域外

图片.png

  • 效果:
    3.gif
  • 代码:
<!--结构-->
<scroll-view class="container" scroll-x>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>
----------------------------我是分隔符---------------------------------------------
/* 样式 */
.container {
    width: 100%;
    white-space: nowrap;
}
.container view {
    display: inline-block;
  width: 100%;
  height: 300rpx;
    text-align: center;
    line-height: 300rpx;
}
/* css3语法 */
.container view:nth-child(1) {
    background-color: lightcoral;
}
.container view:nth-child(2) {
    background-color: lightcyan;
}
.container view:nth-child(3) {
    background-color: lightgoldenrodyellow;
}

swiper和swiper-item

介绍:

  • 轮播图容器组件 和 轮播图item组件

4.gif

可以在在swiper组件中加上 一下可选项

  • 🎏indicator-dots : 是否显示面板显示点
  • 🎏indicator-color: 未选中的面板点颜色
  • 🎏indicator-active-color: 选中面板点的颜色
  • 🎏autoplay : 自动播放
  • 🎏circular: 衔接滑动
  • 🎏duration: 滑动的时间间隔
  • 🎏interval: 自动切换的时间,也就是停留的时间

代码:

<!--结构-->
<swiper class="container" indicator-dots circular duration="500" interval="1000"  indicator-color="white" indicator-active-color="lightblue" autoplay>
    <swiper-item>A</swiper-item>
    <swiper-item>B</swiper-item>
    <swiper-item>C</swiper-item>
</swiper>
------------------------------------我是分割线--------------------------------------
/* 样式 */
.container {
    width: 100%;
}
.container swiper-item {
    display: inline-block;
  width: 100%;
  height: 300rpx;
    text-align: center;
    line-height: 300rpx;
}
/* css3语法 */
.container swiper-item:nth-child(1) {
    background-color: lightcoral;
}
.container swiper-item:nth-child(2) {
    background-color: lightcyan;
}
.container swiper-item:nth-child(3) {
    background-color: lightgoldenrodyellow;
}

基础内容组件

text

介绍:

  • 文本组件
  • 类似于HTML 的span标签

可以通过对text组件中加上 user-select设置为可选中

图片.png

rich-text

富文本标签

介绍:

  • 可以通过nodes节点 将HTML 渲染呈对于UI结构
    图片.png
✨谢谢你的阅读,您的点赞和收藏就是我创造的最大动力!✨
• 1


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信小程序:通过腾讯地图获取用户地理位置信息及其行政区域代码
微信小程序:通过腾讯地图获取用户地理位置信息及其行政区域代码
16 0
ASP.NET Core: 二十五. TagHelper(五)
什么是TagHelper?这是ASP.NET Core 中新出现的一个名词,它的作用是使服务器端代码可以在Razor 文件中参与创建和呈现HTML 元素。
22 0
ASP.NET Core: 二十五. TagHelper(六)
什么是TagHelper?这是ASP.NET Core 中新出现的一个名词,它的作用是使服务器端代码可以在Razor 文件中参与创建和呈现HTML 元素。
15 0
微信小程序scroll-view隐藏滚动条方法
微信小程序scroll-view隐藏滚动条方法
32 0
High&NewTech:新物种?这是一种不需要写代码的程序猿,这事,得从Ta们掌握了 iVX工具(首个无代码编程语言)说起(一)
High&NewTech:新物种?这是一种不需要写代码的程序猿,这事,得从Ta们掌握了 iVX工具(首个无代码编程语言)说起……
86 0
High&NewTech:新物种?这是一种不需要写代码的程序猿,这事,得从Ta们掌握了 iVX工具(首个无代码编程语言)说起(二)
High&NewTech:新物种?这是一种不需要写代码的程序猿,这事,得从Ta们掌握了 iVX工具(首个无代码编程语言)说起……
54 0
一起谈.NET技术,ASP.NET MVC2中Controller向View传递数据的三种方式
  在Asp.net mvc开发中,Controller需要向View提供Model,然后View将此Model渲染成HTML。这篇文章介绍三种由Controller向View传递数据的方式,实现一个DropDownList的显示。
770 0
+关注
计算机魔术师
当才华满足不了野心的时候,请努力!
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载