首页 > PHP资讯 > 工具库 > 微信小程序UI与容器组件

微信小程序UI与容器组件

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

1.总结与概述

2.容器组件

2.1 组件容器(view)

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

2.3 滑块视图容器(swiper)

1.总结与概述

1.1 UI组件总结图

page.wxml

 水平布局:   red  green  blue  垂直布局:   red  green  blue 

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) 总结

水平滚动布局          垂直滚动布局          

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)总结

page.wxml

        

page.js

//game.jsPage({ 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)}})

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

更多微信小程序 UI与容器组件相关文章请关注PHP中文网!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持5不支持0