微信小程序 视图容器组件的详解及实例代码


Posted in Javascript onJanuary 19, 2017

微信小程序 视图容器组件详解:

小程序给出的视图容器组件有三个:</view>、</scroll-view>和</swiper>:

1、</view> 视图容器

</view>相当于html中的</div>标签,有四个属性:

微信小程序 视图容器组件的详解及实例代码

hoverhover-class与点击效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果。

hover-start-time和hover-stay-time与点击效果的时间有关:hover-start-time设置点击之后点击效果出现的延迟时间,hover-stay-time设置点击效果持续的时间,单位都是毫秒。

创建一个项目测试一下:

index.wxml

<view class="container">
 <view class="flex-item bc_green" hover="true" hover-class="green_hover">1</view>
 <view class="flex-item bc_red" hover="true" hover-class="red_hover" hover-start-time="400" hover-stay-time="1000">2</view>
 <view class="flex-item bc_blue">3</view>
</view>

index.wxss

.flex-item{
 width: 100%;
 height: 100px;
 box-sizing: border-box;
}
.bc_green{
 background-color: green;
}
.bc_red{
 background-color: red;
}
.bc_blue{
 background-color: blue;
}
.green_hover{
 border: 5px solid black;
}
.red_hover{
 border: 5px solid black;
}

效果如下:

微信小程序 视图容器组件的详解及实例代码

设置了第一个和第二个子view的点击效果,这两个点击效果的时间有所不同,第二个的点击之后延迟出现的时间更长,而且持续的时间也更长。第三个没有另外的点击效果,因此是使用的默认值,默认是没有点击效果的。

2、</scroll-view> 可滚动视图区域

</scroll-view>有两类:横向滚动和纵向滚动。</scroll-view>有以下属性:

微信小程序 视图容器组件的详解及实例代码

同样,我们创建一个项目来了解以上属性的使用。

index.wxml

<view class="container">
 <scroll-view class="srcoll_view" scroll-y="true" lower-threshold="100" bindscrolltolower="lower" scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">
 <view id="green" class="flex-item bc_green">1</view>
 <view id="red" class="flex-item bc_red">2</view>
 <view id="blue" class="flex-item bc_blue">3</view>
 <view id="yellow" class="flex-item bc_yellow">4</view>
 </scroll-view>
 <view class="clickItem" bindtap="clickAdd">点击向下滚动</view>
 <view class="clickItem" bindtap="clickTo">点击滚动到下一个子view</view>
</view>

index.wxss

.srcoll_view{
 height: 200px;
}
.flex-item{
 width: 100%;
 height: 100px;
 box-sizing: border-box;
}

.bc_green{
 background-color: green;
}

.bc_red{
 background-color: red;
}

.bc_blue{
 background-color: blue;
}
.bc_yellow{
 background-color: yellow;
}

.clickItem{
 margin-top: 20px;
 background-color: grey;
 height: 20px;
 border-radius: 5px;
}

index.js

var app = getApp();
var order = ['green','red', 'blue','yellow','green'];
Page({
 data: {
 scrollTop: 0,
 toView:"green"
 },

 onLoad: function () {
 },

 lower: function(e) {
 console.log(e)
 },

 clickAdd:function(){
 this.setData({
  scrollTop: this.data.scrollTop+20
 });
 console.log("this.data.scrollTop:" + this.data.scrollTop);
 },

 clickTo: function(e) {
 for (var i = 0; i < order.length; i++) {
 if (order[i] === this.data.toView) {
 this.setData({
  toView: order[i + 1]
 })
 break
 }
 }
 },

})

页面效果如下:

微信小程序 视图容器组件的详解及实例代码

scroll-y和scroll-x"

首先我们设置了</scroll-view>的scroll-y="true",也就是纵向滚动,在index.wxss中设置了其高度为200px,里面的每一个子</view>的高度为100px,正好可以完全容纳两个完整的子</view>。如果设置scroll-x="true"则为横向滚动。

scroll-top和scroll-left

scroll-top为竖向滚动条位置,默认为0;同理scroll-left为横向滚动条位置。上述程序中设置了scroll-top="{{scrollTop}}",scrollTop从数据中获取。

为了更好的展示,给一个新的</view>绑定一个函数:

<view class="clickItem" bindtap="clickAdd">点击向下滚动</view>

函数递增改变scrollTop的值:

clickAdd:function(){
 this.setData({
  scrollTop: this.data.scrollTop+20
 });
 console.log("this.data.scrollTop:" + this.data.scrollTop);
 },

所以每点击一次,scrollTop就增加20,因此向下滚动20px。

微信小程序 视图容器组件的详解及实例代码

scroll-into-view

scroll-into-view的值为某个子元素的id,表明滚动到该元素,元素顶部对齐滚动区域顶部。上述程序中设置了scroll-into-view="{{toView}}",toView从数据中获取。

新建一个</view>并绑定一个函数:

<view class="clickItem" bindtap="clickTo">点击滚动到下一个子view</view>
1

函数的功能为按顺序滚动到对应的子元素:

clickTo: function(e) {
 for (var i = 0; i < order.length; i++) {
 if (order[i] === this.data.toView) {
 this.setData({
  toView: order[i + 1]
 })
 break
 }
 }
 },

其中order为一个数组变量,存放着所有子元素的id:

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

bindscrolltolower和bindscrolltoupper

bindscrolltolower和bindscrolltoupper为事件绑定:bindscrolltolower是滚动到底部/右边时触发;bindscrolltoupper是滚动到顶部/左边时触发。另外还有一个bindscroll是只要滚动时就会触发。

以bindscrolltolower为例,bindscrolltolower表示滚动到底部或右边时触发,这个底部或右边是如何定义的呢?这时就需要用到lower-threshold,lower-threshold表示距底部/右边多远时(单位px),触发 scrolltolower 事件,默认值为50,上述代码中我们定义了lower-threshold="100",由于子</view>的高度就是100px,所以正好出现最后一个子</view>时就会触发事件:

微信小程序 视图容器组件的详解及实例代码

3、</swiper> 滑块视图容器

</swiper>其实就是微信小程序封装的幻灯片轮播功能,并给出了几个可供开发者设置的属性:

微信小程序 视图容器组件的详解及实例代码

用户可以根据自己需求设置相应的属性值即可,示例代码如下:

swiper.wxml

<view class="container">
 <swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" bindchange="change">
 <block wx:for="{{imgUrls}}">
  <swiper-item>
  <image src="{{item}}" />
  </swiper-item>
 </block>
 </swiper>
</view>

swiper.wxss

swiper{
 height: 150px;
 width:100%;
}

swiper.js

Page({
 data: {
 imgUrls: [
 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
 ],
 indicatorDots: true,
 autoplay: true,
 interval: 2000,
 duration: 500,
 circular:true
 },

 change:function(e){
 console.log(e);
 }

})

由于绑定了change函数,所以每次切换时,都会触发change事件:

微信小程序 视图容器组件的详解及实例代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
详解参数传递四种形式
Jul 21 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 #Javascript
js实现漫天星星效果
Jan 19 #Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 #Javascript
javaScript基础详解
Jan 19 #Javascript
bootstrap css样式之表单
Jan 19 #Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 #Javascript
You might like
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现网站的模拟登录
2016/01/04 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python实现的建造者模式示例
2018/08/06 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
django认证系统 Authentication使用详解
2019/07/22 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
详解python中的闭包
2020/09/07 Python
Python基于Faker假数据构造库
2020/11/30 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
中班上学期幼儿评语
2014/04/30 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
幼师辞职信范文
2015/02/27 职场文书
人事任命通知
2015/04/20 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
MySQL索引失效场景及解决方案
2022/07/23 MySQL