微信小程序 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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
JS实现简易日历效果
Jan 25 Javascript
利用js实现简单开关灯代码
Nov 23 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
destoon之一键登录设置
2014/06/21 PHP
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
用js编写留言板
2020/03/17 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python饼状图的绘制实例
2019/01/15 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
运动会入场口号
2014/06/07 职场文书
烈士陵园观后感
2015/06/08 职场文书
关于教师节的广播稿
2015/08/19 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
vue封装数字翻牌器
2022/04/20 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js