小程序 —— Day1

组件 --- view和scroll-view

view

类似于HTML中的div,是一个块级元素

案例:通过view组件实现页面的基础布局

scroll-view

可滚动的视图区域,用来实现滚动列表效果

案例:实现纵向滚动效果

scroll-x属性:允许横向滚动;scroll-y属性:允许纵向滚动

在使用竖向滚动的时候,必须给 scroll-view 一个固定高度

组件 --- swiper和swiper-item

swiper

轮播图容器组件

swiper-item

轮播图item组件(里面每一个可以轮播的item项)

案例:实现轮播图效果

swiper组件的常用属性

indicator-dots 默认值:false 是否显示小圆点

indicator-color 指示点颜色

indicator-active-color 当前选中的指示点颜色

autoplay 是否自动切换轮播图

interval 更改自动切换时间间隔 (默认为5s(5000))

circular 默认值:false 是否采用衔接滚动 (最后一张 -> 第一张)

组件 --- text和rich-text

text

文本组件;类似于HTML中的span标签,是一个行内元素

selectable属性,实现长按选中文本内容的效果(场景:长按选中,复制)

注意:小程序里只有text组件支持长按选中操作

rich-text

富文本组件;支持把HTML字符串渲染成WXML结构

nodes属性,实现把HTML字符串渲染为对应的UI结构

组件 --- button和image

button

type属性 ------ 指定按钮类型

size="mini" ------ 小尺寸按钮

plain属性 ------ 镂空按钮(没背景色,但有边框线)

image

mode属性

常用属性值:

scaleToFill 默认值 使图片的宽高完全拉伸至填满image元素

aspectFit 在保持纵横比的情况下缩放图片,使图片的长边能完全显示出来

aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来(也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取)

widthFix 宽度不变,高度自适应,保持原图宽高比不变

heightFix 高度不变,宽度自适应,保持原图宽高比不变(直到把整张图片完整显示出来为止)

小程序API的三大分类

事件监听API

以on开头,用来监听某些事件的触发

eg. wx.onWindowResize 监听窗口尺寸变化的事件

同步API

以Sync结尾的API

eg. wx.setStorageSync('key','value')向本地存储中写入内容

异步API

需要通过success、fail、complete接收调用的结果

eg. wx.request() 发起网络数据请求,通过success回调函数接收数据

相关推荐
andrsted5 小时前
用练题簿小程序 - 让错题不再白错
学习·微信小程序·小程序·学习方法
2601_949950636 小时前
练题簿,把培训从“走过场”变成“真落地”
人工智能·学习·小程序·刷题·小程序推荐
疯狂小猫咪6 小时前
中小培训机构教务数字化踩坑复盘|从 Excel 过渡到教务系统经验总结
小程序·excel
www_aiyuanma_vip17 小时前
信息安全小卫士
小程序
www_aiyuanma_vip21 小时前
家乡介绍小程序
小程序·notepad++
www_aiyuanma_vip1 天前
信息安全小卫士(深色系版本)
小程序
博、、1 天前
智慧场馆小程序系统实战指南:从架构设计到落地部署
小程序
冠品科技-小程序开发1 天前
做实体的,盲盒玩法别只停留在线下
小程序·软件构建·个人开发·软件需求
2501_915106321 天前
iOS数据采集技术详解:从性能监控到崩溃分析的全链路实践
android·ios·小程序·https·uni-app·iphone·webview
黑马程序员毕设2 天前
基于Java的医院药品管理系统的优化设计与实现
java·开发语言·spring boot·小程序·架构·课程设计·毕设