微信小程序之scroll-view可滚动视图区域

组件说明:

可滚动视图区域。

组件用法：

纵向滚动用法

Tip:

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。

当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）

当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

    <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>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滚动条滚到顶部的时候触发

  upper: function(e) {

    consolelog(e)

  },

  //滚动条滚到底部的时候触发

  lower: function(e) {

    consolelog(e)

  },

  //滚动条滚动后触发

  scroll: function(e) {

    consolelog(e)

  },

  //点击按钮切换到下一个view

  tap: function(e) {

    for (var i = 0; i < orderlength; ++i) {

      if (order[i] === thisdatatoView) {

        thissetData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通过设置滚动条位置实现画面滚动

  tapMove: function(e) {

    thissetData({

      scrollTop: thisdatascrollTop + 10

    })

  }

})

css

scroll-view_H{

  white-space: nowrap;

}

scroll-view-item{

  height: 200px;

}

scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

横向滚动用法

Tip:

横向滚动无法使用scroll-into-view属性。

当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）

当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">

    <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>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滚动条滚到顶部的时候触发

  upper: function(e) {

    consolelog(e)

  },

  //滚动条滚到底部的时候触发

  lower: function(e) {

    consolelog(e)

  },

  //滚动条滚动后触发

  scroll: function(e) {

    consolelog(e)

  },

  //点击按钮切换到下一个view

  tap: function(e) {

    for (var i = 0; i < orderlength; ++i) {

      if (order[i] === thisdatatoView) {

        thissetData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通过设置滚动条位置实现画面滚动

  tapMove: function(e) {

    thissetData({

      scrollLeft: thisdatascrollLeft + 10

    })

  }

})

wxss

scroll-view_H{

  white-space: nowrap;

}

scroll-view-item{

  height: 200px;

}

scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

主要属性：

属性类型默认值描述

scroll-xBooleanfalse允许横向滚动

scroll-yBooleanfalse允许纵向滚动

upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-topNumber设置竖向滚动条位置

scroll-leftNumber设置横向滚动条位置

scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部

bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件

bindscrollEventHandle滚动时触发，eventdetail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

点击“企业”选

项，然后就可以填写各种信息了。注册服务号需要填写的信息比较多，

微信官方要求所有的信息都必须如实填写，比如企业的名称、营业执照

扫描件照片、运营者姓名、身份z号码、身份z照片、手机号码和验证

码等信息。所有信息填写完成后，就可以点击提交，确认注册信息。需

要注意的是，运营主体一旦确认便不能进行更改。

第七步，填写公众号名称、功能介绍、运营所属城市等信息，然后

点击“完成”即可。

相对于服务号，很多更青睐订阅号，因为它可以每天向

推送群发信息，这大大增强了能力。运营得好，

就可以帮助快速地树立起品牌形象和口碑。更重要的是，订

阅号对个人开放，每个人都可以拥有一个属于自己的订阅号。

订阅号申请程序相对简单，限制条件也比较少，具体步骤如下：

首先，订阅号的前期准备和申请方式和服务号的相同。比如，

准备好一个注册邮箱，然后进行邮箱验证。但是验证之后的申请步骤就

有所区别了。

官网： >

上一章即微信小程序之view的flex布局(1)里，我们学习了flex容器的属性，总结一下它里面包括

(1)flex-direction 设置容器内子元素即flex-item的排列方向。

(2)flex-warp 设置容器内子元素是否换行。

(3)justify-content 设置子元素在横轴即X轴的排列位置

(4)align-items 设置子元素在Y轴的排列位置

(5)align-content 设置子元素在多个主轴线上排列的位置。

下面我们来讲讲 flex-item的属性，在flex容器中，每个子元素就是一个flex-item

如果item没有设置order，则order默认为0，如图我设置了view2,3,4的位置为3,2,1 看效果图：

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。效果看图：

因为设置了view3，4设置了left-align属性 ，所以没有均分，大家可以去掉尝试一下。

直接上图  

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

资料地址     demo 地址

:

开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发，什么是组件？

组件是视图层的基本组成单元。

组件自带一些功能与微信风格的样式。

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

形式:

　Content goes here

例如:

组件的属性

所有组件的属性都是小写，以连字符"-"连接

属性类型:每个组件的属性是分不同的类型的

公共属性:所有的主键都有的属性

特殊属性

1属性的类型

2共同属性

3特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰。

组件及类型的说明

组件名称 组件类型 组件说明

view 视图容器 视图容器

scroll-view 视图容器 可滚动视图容器

swiper 视图容器 滑块视图容器

icon 基础内容 图标

text 基础内容 文字

progress 基础内容 进度条

button 表单 按钮

form 表单 表单

input 表单 输入框

checkbox 表单 多项选择器

radio 表单 单项选择器

picker 表单 列表选择器

picker-view 表单 内嵌列表选择器

slider 表单 滚动选择器

switch 表单 开关选择器

label 表单 标签

navigator 导航 应用连接

audio 多媒体 音频

image 多媒体

video 多媒体 视频

map 地图 地图

canvas 画布 画布

contact-button 客服会话 进入客服会话按钮

实例理解组件属性

在根目录下创建如下的页面目录

然后在mypageswxss文件中添加button1的样式如下

/ mypageswxss /

button1{

width: 256rpx;

height: 128rpx;

}

然后在mypageswxml文件中添加如下代码

我的第一个微信小程序

按钮

其中，主要是看button这个按钮控件，其中的属性id 由前面可知是string类型的，所以这个属性的格式为 属性名称="自定义字符串"，class也是string类型的属性，所以格式相同，后面的bingdtap属性就是之前所介绍过的组件的事件，在这个按钮组件中点击按钮，就会出发bindtap属性所指向的在myagesjs中对应的名字为"anyfunction"的方法。

点击左侧编译后查看效果如下

boolean类型的属性，只要写了属性名，那值就是为true，例如

我的第一个微信小程序

按钮

其中只要写了hidden这个类型是boolean类型的属性名字，那这个属性就是生效的,运行效果如下，按钮被隐藏:

以上就是关于微信小程序之scroll-view可滚动视图区域全部的内容，包括:微信小程序之scroll-view可滚动视图区域、怎么开发微信小程序那些接口好复杂，怎么弄呢、微信小程序开发手册(配置和视图层)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！