• 小程序页面结构


    (1) 区域布局组件

    view 定义块级区域,相当于网页中的 div 标签
    text 定义行内区域,相当于网页中的 span标签
    (2) 链接跳转组件

    navigator 组件相当于网页中的 a 标签,用来实现页面之间的跳转。

    url 属性支持相对和绝对路径,路径为空时会报错

    hover-class 属性定义点击态的样式,none 值表示禁用点击效果

    open-type 属性定义跳转方式,tabBar 类型的页面时值为 switchTab,默认值为 navigate

    注意: 如果跳转的页面是在app.json的tabBar中注册过的, 必须要添加open-type="switchTab"才可以, 否则跳转不起作用

    (3) 图片组件

    image 组件用来在页面中显示图片相当于网页中的 img (注意单词不同)

    image 默认具有宽高尺寸**(320 * 240px)** 占位容器
    当占位容器与图片实际尺寸宽高比不一致时,图片无法正常显示
    mode 属性控制图片的显示方式
    scaleToFill 图片提伸铺满占位容器
    aspectFit 图片同比例缩放显示,长边完整显示出来(占位容器可能会留白)
    aspectFill 图片同比例缩放显示,短边完整显示出来(图片可能被裁切)
    widthFix 宽度固定, 高度自适应
    heightFix 高度固定, 宽度自适应
    (4) 滑动组件(轮播图)

    swiper 组件在页面中创建可以滑动的区块,常常用来实现轮播图的交互效果。

    组件的结构
    swiper 滑块容器,内部只能嵌套 swiper-item,默认高度为 150px
    swiper-item 滑块单元,内部嵌套任意内容,如 image 组件

      1
      2
      3

    1
    2
    3
    4
    5
    组件属性

    indicator-dots 是否显示小圆点

    小圆点的颜色可以改变

    indicator-color 未选中时的颜色设置

    indicator-active-color 选中时的颜色设置

    autoplay 是否自动播放

    interval 自动切换的时间间隔(单位: ms)

    circular 是否衔接滑动

    (5) 表单组件

    button组件
    size 指定按钮的大小
    default 默认大小
    mini 小尺寸
    type 颜色样式
    primary 绿色
    default 白色
    warn 红色
    plain 按钮是否镂空,背景色透明
    用户头像
    button 组件的 open-type 属性设置为 chooseAvatar
    监听 button 组件的 chooseavatar 事件(没有大写字母)
    事件回调中通过事件对象 ev.detail.avatarUrl
    input输入框组件与网页中 input 标签的作用一致
    type属性指定表单的类型
    text 文本输入键盘
    number 数字输入键盘
    idcard 身份证输入键盘
    digit 带小数点的数字输入键盘
    nickname 昵称输入键盘
    value 输入框的初始内容
    placeholder 属性指定输入框为空时的占位文字
    password 是否是密码类型
    focus 是否获取焦点
    radio-group 和 radio 单选框组件, 相当于网页中的
    value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value
    checked 定义选中的状态, 可用来设置默认选中
    disabled 是否禁用
    color checkbox 的 颜色
    checkbox-group 和 check 复选框组件, 相当于网页中的
    value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value
    checked 定义选中的状态, 可用来设置默认选中
    disabled 是否禁用
    color checkbox 的 颜色
    picker 选择框组件 相当于网页中的 select 标签
    mode 属性定义选择框的类型
    selector 普通选择器
    multiSelector 所列选择器
    time 时间选择器
    date 日期选择器
    region 省市区选择器
    switch 开关选择器
    checked 选中状态
    type 样式 有效值:switch(默认) checkbox
    (6) 区域滚动组件

    scroll-view 在页面中指定一个可以滚动的区域,并且这个可滚动的区域能够实现一些高级的交互,比如下拉刷新等。

    scroll-view 中嵌套任意需要滚动的内容,要求必须有溢出,垂直滚动时 scroll-view 必须要指定高度。

    scroll-x 属性是否允许水平方面滚动
    scroll-y 属性是否允许垂直方向滚动
    refresher-enable 属性是否开启下拉刷新的交互
    refresher-triggered 设置下拉刷新状态,true 下拉刷新已经被触发,false 表示下拉刷新未被触发
    (7) rich-text

    微信小程序中不支持网页的标签结构, 只有用rich-text 转化, 才能是使网页标签起作用

    nodes HTML 字符串或数组
    user-select 文本是否可选,该属性会使节点显示为 block

  • 相关阅读:
    计算机视觉与深度学习-Transformer-【北邮鲁鹏】
    嵌入式 Linux 入门(七、Linux 下的环境变量)
    蓝桥杯中级题目之组合(c++)
    POSTGRESQL 从越来越多的ORACLE DBA 考取 PG 证书, 回顾2019- 2022
    太空射击第10课: Score (繪畫和文字)
    HTML+CSS+JavaScript七夕情人节表白网页【樱花雨3D相册】超好看
    【Rust】——【面向对象语言的特征】
    Nginx神奇的499竟然不在HTTP响应码标准内?快来了解一下!
    注册中心-选型
    Helplook VS Document360:哪个更适合知识库管理?
  • 原文地址:https://blog.csdn.net/xiwmwmwm/article/details/139818416