小程序常用组件－视图容器

本系列主要对小程序常用的组件做一个总结，方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性，在每个组件中代表的意义和数据类型都是一样的。

容器组件：内部能嵌套任何标签。常用的视图容器有： view , scroll-view , swiper

<view/> 是一个块级容器组件，任何一种复杂的布局都可以嵌套在 <view/> 组件内，并在 wxss 中设置相关样式。

<view/> 除了上述组件共有的属性外，还包含一组关于点击行为的属性。

在布局中，需要容器具有可滑动的功能，且能监听滚动、触顶、触底等事件，就需要 <scroll-view/> 组件， <scroll-view/> 在 <view/> 组件上添加滚动相关的属性，通过这些属性，可以响应滚动相关事件。

注意:

<textarea/> , <video/> , <map/> , <canvas/> 不能嵌套在 <scroll-view/> 中使用

利用 swiper 组件，可以实现轮播图，滑动页面，预览等，一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成，不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/> 标签，放置其它的标签会被删除，其中， <swiper-item/> 中能放置任何标签，高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/> 的属性如下：

一、小程序创建组件过程

1、首先创建一个components目录，下面放文件(组件文件)

2、创建两个组件文件（Listitem和lunbo）

3、在pages文件夹json文件里面，进入对应的模块内引用Listitem和lunbo组件

4、在wxml文件中使用标签属性来引入组件

自定义组件中和页面中的class名重名，是不会产生冲突的；

页面中的class和自定义组件中的class重名；同样不会产生冲突；

二、父传子：

三、子传父：

子组件绑定事件handle事件（bindtap=“handle”）

在一些场景中，我们需要获取到标签里面的值来和接口返回的值做对比，一致则进行下一步，后者进行错误判断

<block wx:for='{{objectArray}}'  data-name='{{itemname}}' data-id='{{itemid}}' bindtap='select'>

        <text class='yuzhong'>{{itemname}}</text>

    </view>

主要在于 data- 这个上面  上面的那个name 和 id 是我自己定义的，你们可以随意定义一些语义化的词，

获取也很简单：

select:function(e){

consolelog(ecurrentTargetdatasetname);

    },

为了满足用户的需要，微信小程序广告组件正在内测中，同时还更新了其他功能，让微信的功能日渐完善。下面我们一起来了解下这次更新的具体内容。

微信小程序本次更新的主要内容有：

1、内测小程序广告组件

为满足小程序开发者变现需求，小程序广告组件已启动内测。

开发者开通流量主模块后，可通过创建广告单元，使用广告组件将广告卡片灵活配置在小程序页面内。

同时，微信广告已面向广告主开放品牌活动推广、电商推广、公众号推广及应用推广等类目能力，支持小程序广告资源位投放。

2、新增快速创建小程序接口

为帮助已有公众号用户快速接入小程序服务，公众平台新增“快速注册小程序”权限集。

公众号可授权第三方平台快速注册并认证小程序。

3、新增插件管理接口

为方便小程序开发者使用插件，新增插件管理接口，包括添加插件及管理插件使用申请。

新增“插件管理权限集”，支持小程序授权第三方平台添加插件。

4、更新基础能力

为保护用户隐私并优化体验，开发者在不获取用户信息的情况下，无需用户授权，即可在页面上展示当前用户的昵称和头像等内容。

当前用户小程序版本过低，无法获得最佳使用体验时，开发者可将其更新到最新版本。

小程序新增异步任务处理能力。

期望的效果是，image的高度height是自动的。

网上好多说把image的mode设置为widthFit。这种方法还是需要给image设置宽度高度。并不是height自动，而是height固定，在显示的时候，显示的区域在高度上是自适应的

所以还是需要用js计算

imageLoad: function(e) {

    var $width=edetailwidth,//获取真实宽度

        $height=edetailheight,

        ratio=$width/$height;    //的真实宽高比例varviewWidth=718,//设置显示宽度，左右留有16rpx边距viewHeight=718/ratio;    //计算的高度值varimage=thisdataimages;

      //将的datadata-index作为image对象的key,然后存储的宽高值

image[etargetdatasetindex]={

        width:viewWidth,

        height:viewHeight

      }

      thissetData({

          images:image

      })

  }

>

swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

列表渲染

条件渲染

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wxnavigateBack 可以返回到原页面。小程序中页面栈最多十层。

redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

没铺开直接赋值的打印结果：(打开注释)

不加

铺开后赋值的打印结果：(打开注释)

onPullDownRefresh

onPullDownRefresh()方法，用于监听用户下拉刷新事件。

需要在appjson的window选项中或页面配置中开启enablePullDownRefresh。

onReachBottom()方法，用于监听用户上拉触底事件。

微信小程序regexp对象（附带方法解析）

getRegExp(pattern[, flags])，参数：

以上就是关于小程序常用组件－视图容器全部的内容，包括:小程序常用组件－视图容器、微信小程序创建组件以及父传子、子传父内容、微信小程序 获取标签里面的数据 例如：view、text等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！