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

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

    1.总结与概述

    2.容器组件

            2.1 组件容器（view）

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

            2.3 滑块视图容器（swiper）

1.总结与概述

1.1 UI组件总结图

 1.2 概述

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

 2.容器组件

2.1 容器组件(view)

    (1)总结

    (2)例子

        效果图

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

     (2) 例子

       效果图：

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

(2)例子

    效果图：

     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)
}
})

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

# 微信小程序  # UI与容器组件  # 小程序  # UI与容器组件详解  # 微信小程序 支付功能开发错误总结  # 微信小程序 常用工具类详解及实例  # 微信小程序 基础知识css样式media标签  # 微信小程序 http请求封装详解及实例代码  # 微信小程序 弹幕功能简单实例  # 微信小程序 详解页面跳转与返回并回传数据  # 微信小程序 this和that详解及简单实例  # 微信小程序 基础组件与导航组件详细介绍  # 微信小程序-获得用户输入内容  # 滑块  # 会有  # 希望能  # 谢谢大家  # 类似于  # 换行  # 应用实例  # 素不  # display  # left  # margin  # direction  # height  # background  # column  # wxss  # center  # line  # align  # rpx 

相关文章： 如何快速生成高效建站系统源代码？  安徽网站建设与外贸建站服务专业定制方案  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  如何通过远程VPS快速搭建个人网站？  如何有效防御Web建站篡改攻击？  ,南京靠谱的征婚网站？  建站主机默认首页配置指南：核心功能与访问路径优化  如何通过可视化优化提升建站效果？  Android滚轮选择时间控件使用详解  如何快速搭建安全的FTP站点？  C#如何序列化对象为XML XmlSerializer用法  ,在苏州找工作，上哪个网站比较好？  建站之星如何开启自定义404页面避免用户流失？  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  宁波免费建站如何选择可靠模板与平台？  如何在宝塔面板创建新站点？  如何通过FTP空间快速搭建安全高效网站？  宝塔面板如何快速创建新站点？  如何挑选最适合建站的高性能VPS主机？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  如何在云主机上快速搭建多站点网站？  建站之星ASP如何实现CMS高效搭建与安全管理？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  Android自定义控件实现温度旋转按钮效果  宝塔建站助手安装配置与建站模板使用全流程解析  如何在服务器上三步完成建站并提升流量？  如何在阿里云香港服务器快速搭建网站？  建站之星如何通过成品分离优化网站效率？  Swift中switch语句区间和元组模式匹配  如何用PHP快速搭建CMS系统？  电商网站制作价格怎么算,网上拍卖流程以及规则？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  制作企业网站建设方案,怎样建设一个公司网站？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  西安大型网站制作公司,西安招聘网站最好的是哪个？  文字头像制作网站推荐软件,醒图能自动配文字吗？  代购小票制作网站有哪些,购物小票的简要说明？  自助网站制作软件,个人如何自助建网站？  如何挑选高效建站主机与优质域名？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  娃派WAP自助建站：免费模板+移动优化，快速打造专业网站  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  Python路径拼接规范_跨平台处理说明【指导】  建站主机选购指南：核心配置优化与品牌推荐方案  Python多线程使用规范_线程安全解析【教程】  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  深圳网站制作费用多少钱,读秀，深圳文献港这样的网站很多只提供网上试读，但有些人只要提供试读的文章就能全篇下载，这个是怎么弄的？