小程序 —— 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回调函数接收数据

相关推荐
吴声子夜歌14 天前
小程序——布局示例
小程序
luffy545914 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟14 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
小小王app小程序开发14 天前
海外盲盒小程序抽赏玩法分析(附跨境技术落地要点)
小程序
一叶星殇14 天前
微信小程序请求拦截器踩坑:避免重复刷新 token
微信小程序·小程序
hello kitty w14 天前
4. 基本语法
小程序
CHU72903514 天前
探索淘宝扭蛋机小程序:创意互动与趣味体验的融合
小程序
头发还在的女程序员14 天前
【免费下载】企业能源管理系统
小程序·策略模式·能源管理
吴声子夜歌14 天前
小程序——样式与布局
小程序
hello kitty w15 天前
3.小程序方法的封装
javascript·小程序