可滚动视图区域。
组件用法：
纵向滚动用法
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) {
console.log(e)
},
//滚动条滚到底部的时候触发
lower: function(e) {
console.log(e)
},
//滚动条滚动后触发
scroll: function(e) {
console.log(e)
},
//点击按钮切换到下一个view
tap: function(e) {
for (var i = 0i <order.length++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
//通过设置滚动条位置实现画面滚动
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 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) {
console.log(e)
},
//滚动条滚到底部的时候触发
lower: function(e) {
console.log(e)
},
//滚动条滚动后触发
scroll: function(e) {
console.log(e)
},
//点击按钮切换到下一个view
tap: function(e) {
for (var i = 0i <order.length++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
//通过设置滚动条位置实现画面滚动
tapMove: function(e) {
this.setData({
scrollLeft: this.data.scrollLeft + 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滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
在开发微信小程序时，有时一些视图在手机指定的宽度和高度不够存放，那么可以放在scroll-view中。
在给scroll-view设置滚动的时候，分为三个步骤：
在给scroll-view设置滚动的时候，分为两个步骤：
滚动到指定的id元素位置，并且给滚动的过程添加动画
长期以来，移动互联网界一直在寻找一种既能获得Native原生的体验，又可以低门槛快速开发的技术。在这个过程中出现了很多尝试，例如React Native（RN），RN本质上是轻量化Native开发，在Native基础上做减法；H5的特点是开发成本较低，可以做到比较灵活，但缺点在基础信息获取方面（如地理位置、手机信息、播放器等）和顺滑体验方面无法做到Native的效果；
就在这个背景下，微信小程序也给出了自己的方案，它的做法是在H5的标准上做Native能力的加法，赋予了小程序很多Native的能力，微信通过自行研发的小程序运行时，为小程序提供了大量的API层面能力支持，如地图、导航、画布、滚动视图等方面都能提供支持。
小程序的优越性体现在既保留了H5开发的便利和灵活性，又可以达到媲美Native体验，配合微信11亿用户的社交网络，越来越开发者选择微信小程序的技术的。
据小程序团队透露，目前已经50万+的开发者在从事实际的开发，小程序已经成为移动互联网领域“事实”的标准。伴随着这种趋势，阿里、百度分别在2017年的8月和2018年的3月启动了自己的小程序项目，围绕着支付宝和手机百度APP几个超级APP在移动互联网领域再次攻城略地。小程序已然成为近几年最炙手可热“现象级”技术。
小程序的出现不是一蹴而就，而是在移动互联网近10年的业务、场景积累上逐步发展起来的。Web开发具有高效、灵活、门槛低的特点，但弊端在于所有的页面都依赖浏览器的渲染，浏览器的能力就是的web研发的上限和边界。为了克服这个问题，于是便有了JS-Bridge这种方式，将很多常用组件内置到应用中，当内嵌组件足够多的时候，再做一层封装，形成了JS-SDK，其本质没有差别。
小程序在JS-SDK的基础上，一方面进一步开放和拓展原生的能力给到Web前端调用，另一方面，页面渲染（Webview Render）的UI层和逻辑层，使用了两个独立的线程。如下图所示：
小程序运行时本质上是一个处理Web页面渲染、数据逻辑交互的虚拟机，这个虚拟机提供了丰富的原生能力供小程序调用（API、组件、AI能力等），极大的拓展了Web应用的能力边界，尤其是在诸如滚动视图（scrool-view）、导航（navigator）、图片预览（cover-image）等组件的提供，使得前端开发人员在使用现有的web前端技术，就可以开发出接近原生体验的应用。
其实微信可以分成两部分：即时通讯部分（IM）和小程序的运行渲染引擎（运行时）。小程序的运行的离不开运行时，它作为一个基础支撑已经深度和微信整合。正是利用了微信11亿的巨大的社会协同网络，赋予了小程序方便的转发、分享能力，为商业应用创造了一个崭新的蓝海，所有人都可以利用的这个平台去更好的触达、服务客户。
以往业务部门要发布一些新的功能的时候，用户必须要主动更新App，而且任何一个局部功能的变化升级需要去重新去应用市场再 *** 作一次，成本很高。由于并不是所有的用户都去更新，造成IT团队需要花费大力气去维护多个不同的版本。这种方式造成用巨大的资源浪费和用户体验的不便利。
如果用小程序，这个问题会迎刃而解。首先， 小程序可以独立的去更新，App作为了一个载体，很长的一段时间内，不需要被频繁更新。其次，每个小程序可以按照业务具体需要去独立发布各自的版本，不同的小程序之间的更新升级彼此独立、互不干扰。最后，由于小程序运行的沙箱机制，保证了不论是哪个小程序出现Bug、崩溃等情况，不会拖累应用本身 ，即便出现严重问题，也不过就是把它下线即可。
凡泰小程序运行时是面向全行业的“小程序解决方案”，它借鉴了被大家广发熟知的微信小程序概念，在技术上对微信小程序做兼容，开发工程师在现有的技能上可以直接上手。企业可以基于这套合规、安全的小程序运行时，配合整个小程序的上下架运营平台，自己就成为了一个“微信”。真正把这些技术赋能于现有的业务，App的更新也不再束手束脚，既松绑了业务，也松绑了IT研发。
并不会。首先，小程序的体验和原生几乎没有差别，对用户的来说是“透明”，不细致观察，用户甚至都不知道自己在使用小程序。其次，因为用户其实每天都在接触各种各样的小程序，已经实际上已经嵌入到我们生活的方方面面。比如用户在使用微信坐地铁、买电影票就在用小程序；打开淘宝购物，许多商铺就是小程序；打开百度搜索，出现的还是小程序。
互联网公司实际上已经对用户完成了“教育”和普及。接下来券商可以考虑如何利用好小程序的技术，结合小程序的优势、特点，逐步把现有App的一些业务切换到小程序上来。每个业务单元可以基于小程序进行敏捷迭代，好的产品离不开10000小时定律，让产品团队可以不断的围绕业务场景去打磨、优化，以提供更好的体验和服务。同时借助小程序一次开发多次上架的特点，更好去利用微信的社交网络优势，在获客、触达、营销方面可以做更多的创新和尝试。
任何事物的发展都具有周期性，显然小程序的这波红利已经到来， 今天的创新可能就是明天的标配。当务之急，尽早上船拿到“船票”。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）