常见组件

view
    替代 div
text
    文本标签
    decode可以解析的有   < > & '    
    只支持 text 嵌套。
    长按文字复制(只有该标签支持)selectable 
rich-text
    富文本,可以将字符串解析成对应标签
    1、字符串
    2、对象数组
button
    外观属性
        size        按钮的大小
        type        按钮的样式类型(颜色)
        plain       按钮是否镂空,背景色透明
        disabled    是否禁用
        loading     名称前是否带 loading 图标
    开发能力 open-type
        contact         打开客服会话
                        实现流程:1、AppID 不为测试id
                                 2、登录微信小程序官网,添加--客服--微信
        share           转发当前小程序到微信朋友中
        getPhoneNumber  获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,信息加密
        getUserInfo     获取用户信息,可以从bindgetuserinfo回调中获取到用户信息     
        launchApp       在小程序中打开APP,需要先在App中通过链接打开小程序
        openSetting     打开授权设置页,只会出现用户点击过的权限
        feedback        打开“意见反馈”页面
radio
    必须要和 父元素 radio-group 使用
    color   radio的颜色
    value   radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value
checkbox
    与radio用法类似,必须要和 父元素 checkbox-group 使用
image
    图片标签     默认宽度300px、高度225px
    src        外网图片,上传网站:http://chuantu.biz/
    mode
        scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
        aspectFit   保持纵横比缩放图片,使图片的长边能完全显示出来 (常用)
        aspectFill  保持纵横比缩放图片,只保证图片的短边能完全显示出来。
        widthFix    宽度不变,高度自动变化,保持原图宽高比不变 (常用)
    top、bottom...  图片定位
    lazy-load       图片懒加载,在即将进入一定范围(上下三屏)时才开始加载,默认false
navigator
    导航组件       块级元素(可设置宽高)
    url         当前小程序内的跳转链接,可省后缀名,绝对/相对路径
    target      要跳转到当前小程序(默认)还是其他小程序
    open-type       跳转的方式
        navigate    默认值,保留当前页,跳转到应用内的某个页面,但不能跳转到tabbar页面
        redirect    关闭当前页,跳转到应用内的某个页面,但不能跳转到tabbar页面
        switchTab   跳转到tabbar页面,并关闭非tabbar页面
        reLaunch    跳转到应用内某个页面,并关闭所有页面
icon
    图标
    type    icon的类型
    size    icon的大小,默认23
    color   icon的颜色
swiper
    轮播图外层容器
    每一个轮播项    swiper-item 组件
    默认样式:width:100%    height:150px,无法实现由内容撑开           
    先找原图宽高,等比例给 awiper 定宽高,100vw可用 100%、750rpx
                height:100vw * 原高 / 原宽
                swiper{
                    width:100%;
                    height:calc(100vw * 原高 / 原宽)
                } 
    自动轮播    autoplay
    轮播时间    interval
    轮播衔接    circular
    显示指示器、分页器  indicator-dots
    指示器颜色          indicator-color
    选中时指示器颜色    indicator-active-color

猜你喜欢

转载自www.cnblogs.com/huangyuanning/p/11879698.html
今日推荐