微信小程序 UI与容器组件总结


Posted in Javascript onFebruary 21, 2017

微信小程序 UI与容器组件总结

    1.总结与概述

    2.容器组件

            2.1 组件容器(view)

            2.2 可滚动视图容器(scroll-view)

            2.3 滑块视图容器(swiper)

1.总结与概述

1.1 UI组件总结图微信小程序 UI与容器组件总结

 1.2 概述

        小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签。一个完整用户响应过程:事件触发——>UI组件接收到事件——>触发js函数响应事件——>更新UI

 2.容器组件

2.1 容器组件(view)

    (1)总结

微信小程序 UI与容器组件总结

    (2)例子

        效果图

微信小程序 UI与容器组件总结

        page.wxml

<view>
 <text class="row-view-title">水平布局:</text>
 <view class="flex-wrp-row">
  <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text">red</text></view>
  <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
 </view>
</view>
<view>
 <text class="column-view-title">垂直布局:</text>
 <view class="flex-wrp-column" >
  <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text" >red</text></view>
  <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
 </view>
</view>

        page.wxss

.flex-item-red{
 background-color: red;
 height: 200rpx;
 width: 200rpx;
 text-align: center;
 line-height: 200rpx;
}
.flex-item-green{
 background-color: green;
 height: 200rpx;
 width: 200rpx;
 text-align: center;
 line-height: 200rpx
}
.flex-item-blue{
 background-color: blue;
 height: 200rpx;
 width: 200rpx;
 text-align: center; 
 line-height: 200rpx 
}
.flex-wrp-row{
 flex-direction: row;
 display: flex;
 margin-left: 10rpx;
 margin-top: 20rpx;
}
.flex-wrp-column{
 flex-direction: column;
 display: flex;
 margin-left: 10rpx;
  margin-top: 20rpx;
}
.color-text{
 color: snow;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
.hover-style{
 background-color: black;
}
.row-view-title,.column-view-title{
 margin-left: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
/*重要属性:
 display: flex; //与display:box;是类似,是flexbox的最新语法格式,有更好的适配效果
 flex-direction: column; //表示子布局垂直布局
 flex-direction: row; //表示子布局为水平布局
*/

 2.2 可滚动视图容器(scroll-view)

    (1) 总结

微信小程序 UI与容器组件总结

     (2) 例子

       效果图:

微信小程序 UI与容器组件总结

     page.wxml

<view>
<text>水平滚动布局</text>
</view>
<view class="x-view">
 <scroll-view class="scroll-view-x" scroll-x="true" bindscrolltoupper="scrollXToUpper" bindscrolltolower="scrollXToLower" bindscroll="scroll" scroll-left="0" scroll-into-view="{{green}}">
  <view id="green" class="x_green"></view>
  <view id="red" class="x_red"></view>
  <view id="yellow" class="x_yellow"></view>
  <view id="blue" class="x_blue"></view>
 </scroll-view>
</view>
<view>
<text>垂直滚动布局</text>
</view>
<view class="y-view">
 <scroll-view class="scroll-view-y" scroll-y="true" bindscrolltoupper="scrollYToUpper" bindscrolltolower="scrollYToLower" bindscroll="scroll" scroll-top="0" scroll-into-view="{{green}}">
  <view id="green" class="y_green"></view>
  <view id="red" class="y_red"></view>
  <view id="yellow" class="y_yellow"></view>
  <view id="blue" class="y_blue"></view>
 </scroll-view>
</view>

    page.wxss

.x_green{
 background-color: green;
 width: 500rpx;
 height: 300rpx;
 display: inline-flex;
}
.x_red{
 background-color: red;
 width: 500rpx;
 height: 300rpx;
 display: inline-flex;
 
}
.x_blue{
 background-color: blue;
 width: 500rpx;
 height: 300rpx;
 display: inline-flex; 
}
.x_yellow{
 background-color: yellow;
 width: 500rpx;
 height: 300rpx; 
 display: inline-flex; 
}
.y_green{
 background-color: green;
 width: 100%;
 height: 300rpx;
}
.y_red{
 background-color: red;
 width: 100%;
 height: 300rpx;
}
.y_yellow{
 background-color: yellow;
 width: 100%;
 height: 300rpx;
}
.y_blue{
 background-color: blue;
 width: 100%;
 height: 300rpx;
}
.scroll-view-x{
 display: flex;
 white-space: nowrap;
 width: 100%;
 margin-bottom: 20px;
 margin-top: 10px; 
 height: 300rpx; 
}
.scroll-view-y{
 height: 400rpx;
}
/*重要属性:
 white-space: nowrap;//设置内部元素不换行显示,与display: inline-flex;属性联合使用才会有水平布局的效果
*/

    page.js

//index.js
//获取应用实例
var app = getApp()
//var color_index=['green','red','yellow','blue'];
Page({
 data:{
 toview:'red',
 },
/*滑动到左边触发*/
scrollXToUpper:function(){
 console.log('scrollXToUpper')
},
/*滑动到右边触发 */
scrollXToLower:function(){
 console.log('scrollXToLower')
},
/*滑动到顶部触发*/
scrollYToUpper:function(){
 console.log('scrollYToUpper')
},
/*滑动到左边触发 */
scrollYToLower:function(){
 console.log('scrollYToLower')
},
/*滑动触发 */
scroll:function(){
 console.log("scroll")
},
onLoad: function () {
 console.log('onLoad')
 var that = this
 },
})

2.3 滑块视图容器(swiper)

 (1)总结

微信小程序 UI与容器组件总结

(2)例子

    效果图:

微信小程序 UI与容器组件总结

     page.wxml

<swiper data-current="0" current="0" bindchange="itemChangeFunc" circular="true" indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="swiperkeys">
  <swiper-item>
  <image src="{{item}}" class="slide-image" width="355" height="150"/>
  </swiper-item>
 </block>
</swiper>

  page.js

//game.js
Page({
 data: {
 imgUrls: [
  '/image/wechat.png',
  '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: 3000,
 duration: 1000,
 current:1,
 },
 
 durationChange: function(e) {
 this.setData({
  duration: e.detail.value
 })
 },
 durationChange: function(e) {
 this.setData({
  duration: e.detail.value
 })
 },
itemChangeFunc:function(e){
 // console.log(e.target.dataset.current)
 
 console.log(e.detail)
}
})

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

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 #Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 #Javascript
微信小程序 支付功能开发错误总结
Feb 21 #Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 #Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
原生js实现随机点名
2020/07/05 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
股东授权委托书
2014/10/15 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书