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


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实现预览待上传的本地图片
Mar 15 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
VUE安装使用教程详解
Jun 03 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
如何在微信小程序中存setStorage
Dec 13 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
使用adodb lite解决问题
2006/12/31 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
python web基础之加载静态文件实例
2018/03/20 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物