视图容器

view

视图容器

<view class="section">  <view class="section__title">flex-direction: row</view>  <view class="flex-wrp" style="flex-direction:row;">    <view class="flex-item bc_green">1</view>    <view class="flex-item bc_red">2</view>    <view class="flex-item bc_blue">3</view>  </view></view><view class="section">  <view class="section__title">flex-direction: column</view>  <view class="flex-wrp" style="height: 300px;flex-direction:column;">    <view class="flex-item bc_green">1</view>    <view class="flex-item bc_red">2</view>    <view class="flex-item bc_blue">3</view>  </view></view>

tip: 如果需要使用滚动视图，请使用 scroll-view

scroll-view

可滚动视图区域

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

tip:

1.请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

2.scroll-into-view 的优先级高于 scroll-top

3.在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

4.若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

swiper

滑块视图容器

从 1.4.0 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

1.autoplay 自动播放导致swiper变化；

2.touch 用户划动引起swiper变化；

3.其他原因将用空字符串表示。

注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

swiper-item

仅可放置在<swiper/>组件中，宽高自动设置为100%

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}">    <swiper-item>      <image src="{{item}}" class="slide-image" width="355" height="150"/>    </swiper-item>  </block></swiper><button bindtap="changeIndicatorDots"> indicator-dots </button><button bindtap="changeAutoplay"> autoplay </button><slider bindchange="intervalChange" show-value min="500" max="2000"/> interval<slider bindchange="durationChange" show-value min="1000" max="10000"/> durationPage({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: false,    autoplay: false,    interval: 5000,    duration: 1000  },  changeIndicatorDots: function(e) {    this.setData({      indicatorDots: !this.data.indicatorDots    })  },  changeAutoplay: function(e) {    this.setData({      autoplay: !this.data.autoplay    })  },  intervalChange: function(e) {    this.setData({      interval: e.detail.value    })  },  durationChange: function(e) {    this.setData({      duration: e.detail.value    })  }})

tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起

movable-view

movable-area

movable-view 的可移动区域; 基础库 1.2.0 开始支持，低版本需做兼容处理

注意：movable-area 必须设置width和height属性，不设置默认为10px

movable-view

可移动的视图容器,在页面中可以拖拽滑动; 基础库 1.2.0 开始支持，低版本需做兼容处理

除了基本事件外，movable-view提供了两个特殊事件

movable-view 必须设置width和height属性，不设置默认为10px

movable-view 默认为绝对定位，top和left属性为0px

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动

cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button

cover-image

覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。基础库 1.4.0 开始支持，低版本需做兼容处理

tip:

1.基础库 2.1.0 起支持设置 scale rotate 的css样式，包括transition动画

2.基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow

3.基础库 1.9.90 起最外层 cover-view 支持 position: fixed

4.基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。

5.基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。

6.基础库 1.6.0 起支持css opacity。

7.事件模型遵循冒泡模型，但不会冒泡到原生组件。

8.文本建议都套上cover-view标签，避免排版错误。

9.只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。

10.建议子节点不要溢出父节点

11.默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;

12.自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示

基本内容

icon

图标

text

文本

space 有效值：

Tips

1.decode可以解析的有   < > & '    

2.各个操作系统的空格标准并不一致。

3.<text/> 组件内只支持 <text/> 嵌套。

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

bug : 基础库版本低于 2.1.0 时， <text/> 组件内嵌的 <text/> style 设置可能不会生效

rich-text

富文本

基础库 1.4.0 开始支持，低版本需做兼容处理

支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

1.元素节点：type = node

2.元素节点：type = node

受信任的HTML节点及属性;全局支持class和style属性，不支持id属性

tip:

1.nodes 不推荐使用 String 类型，性能会有所下降。

2.rich-text 组件内屏蔽所有节点的事件。

3.attrs 属性不支持 id ，支持 class 。

4.name 属性大小写不敏感。

5.如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。

6.img 标签仅支持网络图片。

7.如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效

progress

进度条

表单组件

button

按钮

注：

1.button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

2.bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。

3.在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

4.从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力

size 有效值

type 有效值

form-type 有效值

open-type 有效值

/** wxss **//** 修改button默认的点击态样式类**/.button-hover {  background-color: red;}/** 添加自定义button点击态样式类**/.other-button-hover {  background-color: blue;}<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button><button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary </button><button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button><button bindtap="setDisabled">点击设置以上按钮disabled属性</button><button bindtap="setPlain">点击设置以上按钮plain属性</button><button bindtap="setLoading">点击设置以上按钮loading属性</button><button open-type="contact">进入客服会话</button><button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button><button open-type="openSetting">打开授权设置页</button>var types = ['default', 'primary', 'warn']var pageObject = {  data: {    defaultSize: 'default',    primarySize: 'default',    warnSize: 'default',    disabled: false,    plain: false,    loading: false  },  setDisabled: function(e) {    this.setData({      disabled: !this.data.disabled    })  },  setPlain: function(e) {    this.setData({      plain: !this.data.plain    })  },  setLoading: function(e) {    this.setData({      loading: !this.data.loading    })  },  onGotUserInfo: function(e) {    console.log(e.detail.errMsg)    console.log(e.detail.userInfo)    console.log(e.detail.rawData)  },}for (var i = 0; i < types.length; ++i) {  (function(type) {    pageObject[type] = function(e) {      var key = type + 'Size'      var changedData = {}      changedData[key] =        this.data[key] === 'default' ? 'mini' : 'default'      this.setData(changedData)    }  })(types[i])}Page(pageObject)

checkbox

checkbox-group

多项选择器，内部由多个checkbox组成

checkbox

多选项目

属性名	类型	默认值	说明
value	String		标识，选中时触发的 change 事件，并携带  的 value
点击这里免费试用，快速创建您的专属小程序 标签： 微信小程序 小程序 小程序是什么 版权声明 即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。 产品经理 手机 : 13312967497 擅长 : 小程序流量变现 扫码领取礼包 最新资讯 即速应用，赋能企业玩转微信小程序智慧经营 作为国内领军的智慧商业经营服务商，即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景，持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品，帮助商家打通互联网全生态营销闭环。 1778739570 即客云2.0重磅更新，让微信小程序运营更简单！ 即客云作为一款基于企业微信的第三方工具，现从多维度提供超过30种功能，自上线以来，已服务多家企业，受到一致好评。近期，我们根据客户反馈和市场调研正式推出升级版 即客云2.0！更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信；同时提升了社群运营工作标准化，提升运营效率，帮助企业实现客户增长，玩转私域流量。 1778653591 零代码 + AI 双轮驱动｜即速应用解锁人工智能小程序开发新范式 无需代码、无需 AI 算法功底，普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合，推出 AI 智能生成能力，用户通过自然语言描述需求，AI 自动生成小程序页面、功能模块与后台配置，覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力，一键对接微信生态，打通视频号、企业微信、短信跳转，帮企业快速落地 AI 应用，抢占智慧经营先机，让每家企业都拥有 AI 驱动的智慧店铺。 1778581190 热门模板 相关资讯 小程序官方组件 微信小程序-获取QQ音乐直链 即速应用，赋能企业玩转微信小程序智慧经营 招商热线 17304402882 小程序制作 小程序加盟 小程序教程 小程序商店 资源社区 即速商店 即速资讯 即速学院 即速问答 即速论坛 用户中心 加入我们 关于我们 媒体报道 更多案例 商务合作 联系我们 套餐咨询：13312967497 招商咨询：17304402882 周一至周五 9:30-18:30 公司地址：广东省深圳市南山区 阳光科创大厦A座1209 关注即速应用 咫尺网络微信 晓程序速报微信 即速应用微信 微页微信 h5秀微信 更多资讯： 深圳市咫尺网络科技开发有限公司©2015 咫尺网络 粤ICP备14097199号 选择模板 换一换 ✕ 您获得免费搭建云店小程序特权，无需微信注册、认证即可完成小程序上线，赶快挑选模板搭建自己的小程序吧~ 下一步