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


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实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
详解vue项目构建与实战
Jun 27 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
jQuery实现全选按钮
Jan 01 jQuery
详解前端构建工具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
综合图片计数器
2006/10/09 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
判断网页编码的方法python版
2016/08/12 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python3 合并二叉树的实现
2019/09/30 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
Java如何格式化日期
2012/08/07 面试题
大学三年的自我评价
2013/12/25 职场文书
学年自我鉴定
2014/01/16 职场文书
医药销售求职信范文
2014/02/01 职场文书
护士长竞聘书
2014/03/31 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
个性与发展自我评价
2015/03/06 职场文书
防汛通知
2015/04/25 职场文书
2015年质检工作总结
2015/05/04 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js