美文网首页666笔记侠
53/666 小程序视图容器

53/666 小程序视图容器

作者: 红叔笔记 | 来源:发表于2018-10-12 14:24 被阅读6次
image

这是666计划的53篇笔记

体验代码：

在开发者工具中预览效果

组件

所有组件参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/

image image image

组件的小程序官方文档入口： https://developers.weixin.qq.com/miniprogram/dev/component/

view组件

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/view.html

属性名 类型 默认值 说明 最低版本
hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒

关于hover-class示例代码：

index.wxss:

/** view **/
.view-parent-container {
    width: 300rpx;
    height: 300rpx;
    background: yellowgreen;
}
.hover-parent-container {
    background: #fff;
}
.view-container {
    width: 200rpx;
    height: 200rpx;
    background: chocolate;
    /* transition: all .5s; */
}
.hover-container {
    background: rgba(0,0,0,0.7)
}

index.wxml:

<view class="section">
    <view>view组件</view>
    <view class="view-parent-container" hover-class="hover-parent-container">
    parent
        <view class="view-container" 
            hover-class="hover-container" 
            hover-stop-propagation='true'
            hover-start-time="500"
            hover-stay-time="300">
            child
        </view>
    </view>
</view>

默认页面效果：

image

加上hover-stop-propagation='true'效果：

只有自己变， 不影响其他

image

没有hover-stop-propagation效果：

所有的背景都跟着变

image

scroll-view 横向 竖向滚动

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

scrollview.wxml:

<!--scorllview.wxml-->
<view>scroll-view组件</view>
<view class="section">
    <view class="section__title">竖向滚动</view>
    <scroll-view style="height: 200px;" 
        scroll-y
        bindscrolltoupper="upper" 
        bindscrolltolower="lower" 
        bindscroll="scroll" 
        scroll-into-view="{{toView}}"
        scroll-top="{{scrollTop}}" 
        enable-back-to-top="true" 
        scroll-with-animation="true">

        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>

    <view class="btn-area">
        <button size="mini" bindtap="tap">click me to scroll into view </button>
        <button size="mini" bindtap="tapMove">click me to scroll</button>
    </view>
</view>
<view class="section">
    <view class="section__title">横向滚动</view>
    <scroll-view class="scroll-view_H" 
    scroll-x >
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red" class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
    </scroll-view>
</view>

scrollview.wxss:

/** scroll-view **/
.scroll-view-item {
    width: 600rpx;
    margin: 0 auto;
    height: 200px;
}
.scroll-view-item.bc_green,
.scroll-view-item_H.bc_green {
    background: green;
}
.scroll-view-item.bc_red,
.scroll-view-item_H.bc_red {
    background: red;
}
.scroll-view-item.bc_yellow,
.scroll-view-item_H.bc_yellow {
    background: yellow;
}
.scroll-view-item.bc_blue,
.scroll-view-item_H.bc_blue {
    background: blue;
}
.scroll-view_H {
    height: 200px;
    margin: 0 auto;
    white-space: nowrap;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}

页面效果：

image

swiper 滑块视图容器

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

示例代码：

在开发者工具中预览效果

属性名 类型 默认值 说明 最低版本
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String "" 当前所在滑块的 item-id ，不能与 current 被同时指定 1.9.0
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
vertical Boolean false 滑动方向是否为纵向
previous-margin String "0px" 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0
next-margin String "0px" 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0
display-multiple-items Number 1 同时显示的滑块数量 1.9.0
skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 1.9.0
bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindanimationfinish EventHandle 动画结束时会触发 animationfinish 事件，event.detail 同上

movable-view组件： 可拖拽移动

参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

示例代码：

在开发者工具中预览效果

属性名 类型 默认值 说明 最低版本
direction String none movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia Boolean false movable-view是否带有惯性
out-of-bounds Boolean false 超过可移动区域后，movable-view是否还可以移动
x Number / String 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y Number / String 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping Number 20 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction Number 2 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled Boolean false 是否禁用 1.9.90
scale Boolean false 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 1.9.90
scale-min Number 0.5 定义缩放倍数最小值 1.9.90
scale-max Number 10 定义缩放倍数最大值 1.9.90
scale-value Number 1 定义缩放倍数，取值范围为 0.5 - 10 1.9.90
animation Boolean true 是否使用动画 2.1.0
bindchange EventHandle 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） 1.9.90
bindscale EventHandle 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回

相关文章

  • 53/666 小程序视图容器

    这是666计划的53篇笔记 体验代码： 在开发者工具中预览效果 组件 所有组件参考文档： https://deve...

  • 微信小程序(四)视图组件

    小程序组件 视图容器 (一) 视图容器 了解小程序组件中的视图容器 明确小程序组件中的视图容器的用途和方法 了解不...

  • 微信小程序公告滚动通知

    微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。 通过...

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

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

  • 应用程序UI编程

    基础组件 基础内容组件 表单组件 微信小程序伸缩布局 视图容器 view scroll-viewswiper-view

  • 小程序开发基础-view视图容器

    view 视图容器。 属性 源码 开源github分享 Wechat_small_program_Share微信小...

  • 微信小程序：滚动视图容器

    直接上两种方案代码以及效果图： 方案1 这种方案是直接使用view，并设置overflow: scrollwxml...

  • 小程序学习笔记（三）视图容器

    准备工作 新建view页面（4个文件都包含，并修改导航栏标题文字为“视图容器”）； 新建app.wxss公共样式表...

  • 小程序的视图容器表单组件

    上一篇 我们微信小程序代码结构和框架调用流程详解，大家对小程序基本框架以及有所了解。这篇文章重点讲解一下视图和文本...

  • 微信小程序上手-swiper使用

    微信小程序上手-swiper使用 swiper 滑块视图容器。 属性名类型默认值说明最低版本 indicator-...

网友评论

    本文标题：53/666 小程序视图容器

    本文链接：https://www.haomeiwen.com/subject/emqgaftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    666笔记侠

    关于我们|服务条款|联系我们|53/666 小程序视图容器|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！