1、view

1、作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性。

2、常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态

  3、eg:<view hover-class="类名" hover-start-time=50>  view  </view>

2、scroll-view

  1、作用:可滚动视图区域。每一个盒子都有自己的滚动条,可以自定义下拉刷新、上拉加载,每个视图区域互不影响。

·2、常用属性:

    1、开启滚动条:使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

  获取滚动视图高度:方式1:使用vh单位。方式2:调用api获取页面可用高度,获取到的高度单位值为px,api:wx.getSystemInfo 。

         eg:<scroll-view scroll-x="true" height="100vh"></scroll-view>或者<scroll-view scroll-x="true" height="{{height}}px"></scroll-view>

js:

 Page({
data:{
height:""
},
onLoad: function (options) {
const sysInfo=wx.getSystemInfoSync()
this.setData({
height:sysInfo.windowHeight
})
}
})

    2、开启自定义下拉刷新、上拉加载

1、为什么使用自定义下拉刷新,上拉加载

页面有时候需要头部固定,列表在头部下面开启下拉刷新。使用原生下拉刷新会使头部也被下拉,这时候使用scroll-view的自定义下拉事件

2、使用属性

        

3、eg:<scroll-view refresher-enabled="true" refresher-triggered="bool"  bindrefresherrefresh="bindRefresher"></scroll-view>

         

Page({
data:{
bool:false //下拉刷新默认关闭
},
bindRefresher(){
this.setData({
bool:true //开启下拉刷新
})
在调用接口后关闭下拉刷新,设置为false
}
})

      

      

3、swiper、swiper-item

  1、作用:滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。常用于轮播图效果

2、常用属性:

    

    eg:<swiper indicator-dots="true" autoplay="true" interval=1000 duration=100>

<swiper-item>

<image src="" />

</swiper-item>

</swiper>

4、movable-area、movable-view

  1、作用:movable-view的可移动区域,可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。

  2、常用属性:

    movabal-view属性

    

3、eg:<movable-area>

<movable-view direction="all"></movable-view>

</movable-area>

5、cover-view

  1、作用:覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 mapvideocanvascameralive-playerlive-pusher,其他组件使用时会被原生组件所覆盖

只支持嵌套 cover-viewcover-image,可在 cover-view 中使用 button。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

2、问题:

                     1、cover-view是覆盖在原生组件之上的文本视图,只支持嵌套cover-view、cover-image
                     2、cover-view不支持text-decoration属性设置
                     3、cover-view设置文本内容换行 white-space: normal;(注意flex布局时可能不起效果哦)

6、cover-image

  1、作用:覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。

2、常用属性:

    

    

    

微信小程序-组件-视图容器的更多相关文章

  1. 微信小程序之视图容器(swiper)组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  2. 微信小程序的视图与渲染

    1.组件的基本使用 <button type="default" > default </button> <button type="pri ...

  3. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  4. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  5. 微信小程序_(视图)简单的scroll-view容器

    scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...

  6. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  7. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  8. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  9. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

随机推荐

  1. C#LeetCode刷题-树状数组

    树状数组篇 # 题名 刷题 通过率 难度 218 天际线问题   32.7% 困难 307 区域和检索 - 数组可修改   42.3% 中等 315 计算右侧小于当前元素的个数   31.9% 困难 ...

  2. LeetCode 763划分字母区间 详解

    题目详情 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示例 1: 输入: S = "ab ...

  3. 调试备忘录-RS485 MODBUS RTU协议简述

    目录--点击可快速直达 目录 写在前面 先简单说下什么是MODBUS? 参考文章 写在前面 最近在做和物联网有关的小项目,有一个传感器通讯用到了RS485 MODBUS RTU协议,所以就写个随笔记录 ...

  4. onlyoffice在线编辑

    一.安装ONLYOFFICE Document Server 二.集成onlyoffice的二次开发 三.故障排除: 四.缺陷 五.总结 ONLYOFFICE Document Server提供文档协 ...

  5. JavaScript学习系列博客_18_JavaScript中的匿名函数

    匿名函数 - 用函数声明的方式创建一个函数时,不加函数名称. function sum(){ console.log("我是函数sum")} - 不加名称,这样写浏览器是会报错的. ...

  6. SparkStreaming架构

    SparkStreaming是一个对实时数据流进行高通量.容错处理的流式处理系统,可以对多种数据源(如Kdfka.Flume.Twitter.Zero和TCP 套接字)进行类似Map.Reduce和J ...

  7. springMVC入门(五)------统一异常处理

    简介 系统中异常包括两类:预期异常和运行时异常RuntimeException,前者通过异常捕获获取异常信息,后者需通过规范代码.提高代码路绑定减少运行时异常的发生 异常处理思路:无论dao层.ser ...

  8. WSGI 配置禁止反向DNS查找

    原文链接:https://opendev.org/starlingx/ha/src/commit/045a37c672a92f1412629a176f51183c88882e61/service-mg ...

  9. openstack vnc 报1006的错误

    1.问题现象 创建完虚拟机以后,通过nova get-vnc-console命令,获取虚机的vnc连接地址,在浏览器中打开该连接,报1006错误 2.vnc的原理图 3.定位分析 1)分别在控制节点和 ...

  10. 算法-搜索(3)AVL树

    AVL树高度平衡的二叉搜索树,任一点的平衡印章只能是+1.-1.0,从而尽量降低树的高度. 如果它有n个结点,高度可保持在O(log2n),平均搜索长度也可保持在O(log2n). (1)AVL树的插 ...