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


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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
常用的js方法合集
Mar 10 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python将txt文件读取为字典的示例
2018/12/22 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python