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


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 相关文章推荐
JavaScript游戏之优化篇
Nov 08 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
详解webpack多页面配置记录
Jan 22 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
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
详解如何运行vue项目
2019/04/15 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
优秀小学生家长评语
2014/01/30 职场文书
先进工作者获奖感言
2014/02/08 职场文书
工作失误检讨书
2015/01/26 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
部门2015年度工作总结
2015/04/29 职场文书
投标售后服务承诺书
2015/04/29 职场文书
太空授课观后感
2015/06/17 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电