微信小程序的视图容器-view
来源:互联网 发布:软件界面设计 编辑:程序博客网 时间:2024/06/07 02:41
微信小程序的视图容器主要包括是是三个,分别是
1.view
2.scrollView
3.swiper
一、view
view就是视图的意思,类似于html中标签
我们先来写一个简单的view
1.view
2.scrollView
3.swiper
一、view
view就是视图的意思,类似于html中标签
我们先来写一个简单的view
在.wxml中写一个view
在对应的.wxss文件写headerView的样式
运行结果:在页面显示一个高度为300rpx的view
这里我们需要指出一点的是微信小程序的尺寸单位rpx
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx= 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)
iPhone5
1rpx = 0.42px
1px = 2.34rpx
iPhone6
1rpx = 0.5px
1px = 2rpx
iPhone6s
1rpx = 0.552px
1px = 1.81rpx
当然微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem:规定屏幕宽度为20rem;1rem = (750/20)rpx 。
多视图容器
.wxml文件
.wxss文件
视图view的事件绑定
为searchView视图容器绑定点击事件bindtap。
.wxml文件
在对应的.js文件中,触发该事件
点击comman+s运行之后,在控制台输出
触发事件。
阅读全文
0 0
- 微信小程序的视图容器-- scroll-view
- 微信小程序的视图容器-view
- 微信小程序-view(视图容器)
- 微信小程序--movable-view(可移动的视图容器)
- 【微信小程序】视图容器-view组件
- 【微信小程序】视图容器-scroll-view组件
- 2.1.1微信小程序视图容器 view
- 微信小程序:视图容器
- 微信小程序的视图容器—swiper
- Container View(sb-容器视图)
- 3、微信小程序笔记---视图容器
- 【微信小程序】视图容器-swiper组件
- 微信小程序组件1--视图容器
- 微信小程序基础组件之视图容器
- 关于自定义视图容器(Container View Controller)
- 关于自定义视图容器(Container View Controller)
- 微信小程序三个视图控件View、ScrollView、Swiper的解读及示例
- 微信小程序之滑块视图容器(swiper)
- spring整合zookeeper与dubbo的入门案例(一)
- vue2.0入门--创建项目
- Leetcode 239. Sliding Window Maximum
- 类加载器
- 【DevExpress v17.1新功能预告】HTML5
- 微信小程序的视图容器-view
- R语言数据处理(2)
- Ruby 时间格式输出
- python在windows下的部署
- 数据结构与算法分析 P86 Stack 栈的实现
- 使用pyInstaller打包py文件
- zookeeper(二) java客户端api的使用
- 如何使用windebug追踪ASL CODE
- Ubuntu 14.04 + OpenCV 3.2+PCL 1.7环境配置