微信小程序 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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
js get和post请求实现代码解析
Feb 06 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP常用处理静态操作类
2015/04/03 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python线程的几种创建方式详解
2019/08/29 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
高级电工工作职责
2013/11/21 职场文书
员工生日会策划方案
2014/06/14 职场文书
2014年中秋寄语
2014/08/11 职场文书
民事辩护词范文
2015/05/21 职场文书
亮剑观后感500字
2015/06/05 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server