小程序:uni学习第三弹

    技术2025-09-04  38

    小程序:uni学习第三弹

    样式

    单位:rpx,750为基础不能使用 * 选择器page相当于body节点局部样式会覆盖全局样式uni.scss | uni.less 中定义的变量可以在组件用使用使用iconfont 路径需改为:~@/static/对应文件夹

    组件: 地址

    1.view

    视图容器类似于传统html中的div,用于包裹各种元素内容属性 hover-class:string | 指定按下去的样式类。hover-class=“none” ,没有点击态效果hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态hover-start-time: number | 按住后多久出现点击态,单位毫秒hover-stay-time: number | 手指松开后点击态保留时间,单位毫秒

    2. text

    文本组件,用于包裹文本内容 | 支持 \n 方式换行

    组件内只支持嵌套 | 用 组件编译时会被转换为

    除了文本节点以外的其他节点都无法长按选中

    属性

    selectable: boolean | 文本是否可选decode: boolean | 是否解码 可以解析的有:   | < | > | & | ' |   |   space: string | 显示连续空格 ensp 中文字符空格一半大小emsp 中文字符空格大小nbsp 根据字体设置的空格大小

    3. button

    常用属性

    size:按钮的大小

    type:按钮的样式类型 | primary ,default,warn

    plain:按钮是否镂空,背景色透明

    disabled:是否禁用

    loading:名称前是否带 loading 图标

    hover-class:string | 指定按钮按下去的样式类。hover-class=“none” ,没有点击态效果

    hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态

    hover-start-time: number | 按住后多久出现点击态,单位毫秒

    hover-stay-time: number | 手指松开后点击态保留时间,单位毫秒

    form-type:submit 提交表单 | reset 重置表单

    open-type

    @error:当使用开放能力时,发生错误的回调 | open-type=“launchApp”@getuserinfo: 用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo@getphonenumber:获取用户手机号回调@opensetting:在打开授权设置页并关闭后回调@launchapp:打开 APP 成功的回调

    4. image

    常用属性

    src: string | 图片资源地址

    mode: string | 图片裁剪、缩放的模式

    缩放

    scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来 aspectFill: 保持纵横比缩放图片,只保证图片的短边能完全显示出来 widthFix: 宽度不变,高度自动变化,保持原图宽高比不变 heightFix: 高度不变,宽度自动变化,保持原图宽高比不变

    裁剪

    top | bottom | left | rightcenter top left: 显示图片的左上边区域 top right: 显示图片的右上边区域bottom left: 显示图片的左下边区域bottom right: 显示图片的右下边区域

    lazy-load: 图片懒加载。只针对page与scroll-view下的image有效

    fade-show: 图片显示动画效果

    @error

    当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}

    @load

    当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}
    Processed: 0.014, SQL: 10