分享小程序前端页面结构代码教程
带.的是类选择器<view class="page-section-gap" />
.page-section-gap{
box-sizing: border-box; //指定边框的宽高
padding: 0 30rpx; //每边的填充边距,上下为0,左右为30
padding-left: 30rpx; //右边填充多少
padding-right: 30rpx; //左边填充多少
font-size: 28rpx; //属性设置字体大小
color: #999999; //设置字体的颜色
margin: 0 auto; //设置所有外边距属性 auto 浏览器计算外边距。
margin-bottom: 10rpx; //设置底边距为2厘米的段落
margin-top: 60rpx; //设置头部空白的距离
border: 2rpx solid #D9D9D9; //指定边框的宽度,样式(一般固定),颜色
position: relative; //相对定位,也可以absolute绝对定位,但是后面要加left:100px;top:200px;
font-size: 28rpx; //设置不同的HTML元素的字体大小
transform: translate(-50%, -50%); //定义 2D 转换。
align-items: center; //属性定义子项在flex容器的项目位于容器的中心(纵向的中心)
justify-content: center; //属性定义子项在flex容器的项目位于容器的中心(横向的中心)
display:flex; //元素应该生成的框的类型 相当于两个div横着连还是竖着连
text-align: left; //设置文本的对齐方式(left:向左对齐) center是在中间
line-height: 2em; //设置行高
white-space: nowrap; //规定段落中的文本不进行换行,直到遇到 <br> 标签为止
overflow: hidden; //overflow 属性规定当内容溢出元素框时发生的事情(hidden内容是不可见的)scroll是显示成滚动条
float: left; //向左浮动
clear: both; //不浮动
border-bottom: 1px dashed #000; //设置底部边距的样式
white-space: nowrap; //规定段落中的文本不进行换行
}
页面设计:
1.先设计最外面的大框架一个view, 里面又包含四个view
<view class="container">
定义高度,
溢出元素框时不显示
.container {
height: 100%;
overflow: hidden;
}
2.设计头部,再一个view 1,
<view class="header {{scrollDown?'hidden':''}}">
只定义定位(相对还是绝对),
背景色,
四周的冲边距离,
字体的颜色(如果需要单独定义,可以再下面的view覆盖)
.header {
position: relative;
background: #feb70f;
padding: 20rpx 40rpx;
color: #000;
}
如果出现滚动条时,margin-top头部的冲边距离往里缩,就是隐藏这些-310rpx
.header.hidden {
margin-top: -310rpx;
}
3.view 1 里面肯定还有很多view1.1,再设计他们
<image class="logo" src="{{shop.img}}"/>
view 1 里面也会有样式,继承他们 .header .logo
定义图片向左浮动
view的宽,高,边框的宽度,样式(一般固定),颜色
元素添加圆角边框
右边填充部分空白
.header .logo {
float: left;
width: 160rpx;
height: 160rpx;
border: 2rpx solid #fff;
border-radius: 50%;
margin-right: 10px;
}
4.view1.1下面的view 1.2
<view class="name ellipsis">{{shop.name}}</view>
定义
内边距的顶部距离
字体大小
行高
.header .name {
padding-top: 20rpx;
font-size: 36rpx;
line-height: 60rpx;
}
5.view 1.2下面的view 1.3
<view class="welcome ellipsis">公告：欢迎光临{{shop.name}}！</view>
定义 颜色,字体大小,宽度,行高
.header .welcome {
color: #333;
font-size: 30rpx;
width: 360rpx;
line-height: 70rpx;
}
6.view 1.3下面的view1.4
<view class="line"></view>
定义
不受浮动元素的影响,就是不浮动
宽度,高度
底部的边距
顶部的内边距
.header .line {
clear: both;
width: 100%;
height: 1px;
border-bottom: 1px dashed #000;
padding-top: 20rpx;
}
7.如果有共同的样式单独抽离出来
定义:
规定段落中的文本不进行换行
显示省略符号来代表超出的内容
超出内容不显示
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
限定多行超出之后用点表示
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
===至此第一个内部大view结束
===至下是内部第二个大view
第二个view里面包含两个scroll-view 可滚动视图区域。
1.第二个view <view class="content-container">
生成第二个view的类型
定义 里面元素生成的方式(横着还是竖着)
宽度和高度以子元素各自指定的内容为准
内边距的底部 空白
.content-container {
display: -webkit-flex; //横向的
height: 100%;
box-sizing: border-box;
padding-bottom: 100rpx;
}
2.里面的滚动view1 ,里面又包含了两个view
<scroll-view class="classify-container" scroll-y="true">
允许了纵向滚动
定义了:宽度,背景色,高度
.classify-container {
width: 150rpx;
background: #efefef;
height: 100%;
}
2.1 滚动view1 里面的第一个view
<view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" data-id="{{classify.id}}" bindtap="tapClassify">
当classify.id不为空的时候classifySeleted=active,
定义背景色
.classify-container .classify.active {
background: #fff;
}
第一个view里面还有一个view,循环出来的,用于迭代输出名字
<view class="name">{{classify.classifyName}}</view>
定义了
view之间竖着排列
字体大小,颜色,行高,靠左排列
.classify-container .classify .name {
display: inline-block; //纵向的
font-size: 30rpx;
color: #646464;
line-height: 1.2;
text-align: left;
}
2.2 第二个滚动的view2
<scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll">
定义 背景色和高度
.goods-container {
background: #ffffff;
height: 100%;
}
此view里面是一个动态循环输出的
<view wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" id="{{classify.id}}">
<view class="title">{{classify.classifyName}}</view>
定义:内边距,颜色,大小,行高,背景色
.goods-container .title {
padding: 20rpx 25rpx;
color: #646464;
font-size: 30rpx;
line-height: 30rpx;
background: #f7f7f7;
}
又是一个for循环,思路现将整体的分类for循环,然后再将分类里面的食物进行for循环
<view class="goods" wx:for="{{classify.goods}}" wx:for-item="id" wx:key="*this">
定义:
相对定位,内边距,字体大小,行高,底边的样式
.goods-container .goods {
position: relative;
padding: 20rpx 30rpx;
font-size: 36rpx;
line-height: 40rpx;
border-bottom: 1px solid #f7f7f7;
}
每次循环都会有一张图片
<image class="pic" src="{{goods[id].pic}}"></image>
定义:左边浮动,宽,高,右边的外边距
.goods-container .goods .pic {
float: left;
width: 130rpx;
height: 130rpx;
margin-right: 20rpx;
}
后面还有一张图片:
<view class="addCart" bindtap="tapAddCart" data-id="{{id}}">
添加食物数量的
绝对定位,离右边,底部,多远,图片的宽度,高度,背景色,圆边
.goods-container .goods .addCart {
position: absolute;
right: 30rpx;
bottom: 30rpx;
width: 64rpx;
height: 64rpx;
background: #feb70f;
border-radius: 50%;
}
======至此第二个大view结束
======以下是第三个大view
<view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}">
定义:绝对定位,左上,宽高
.cart-detail, .cart-detail .mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
定义下面的结算区域
<view class="cart">
子元素横向排布,绝对定位,左上角,宽高100%,背景色
.cart {
display: -webkit-flex;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100rpx;
background: #fff;
}
<view class="data" bindtap="showCartDetail">
.cart .data {
-webkit-flex: 1;
/*border-top: 1rpx solid #e7e7e7;*/
}
1.纵向排布还是横向排布
.class{
display :inline-block //行内块元素
display :block //此元素将显示为块级元素，此元素前后会带有换行符。
display :flex; //弹性伸缩的盒子
flex-direction:column; //纵向排布
flex-direction:row; //横向排布
flex-wrap:wrap; //排列不下时,让元素换行
flex-grow: 8; //在一个区域内,所占有的份数
align-items (适用于父类容器上)
align-items: center; //属性定义子项在flex容器的项目位于容器的中心(纵向的中心) ===两者的区别是一个纵向一个横向
justify-content: center; //属性定义子项在flex容器的项目位于容器的中心(横向的中心)
justify-content:center;//元素在主轴上的对齐方式(单纯的纵向或者横向的中间)
justify-content: space-between; //分别靠左右对齐
order:1; //元素的排序方式,(1,2,3,4位置)
flex:1; //让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：
text-align:center //让文本处于中间
z-index:-1; //在某个元素的下面后者上面出现
}
position:relative 相对定位:相对自身进行定位,参照物是自己.
position:absolute 绝对定位:相对离它最近的一个已经定位的父级元素进行定位
position:fixed; 固定定位:相对于浏览器窗口进行定位
margin:外边距,当给一个view固定宽度和高度,宽度和高度不变,周边扩大一部分空白区域
padding:内边距,当给一个view固定宽度和高度,真实的宽度和高度不会变,也会往周边扩大
1.显示模态弹窗
2.保留当前页面，跳转到应用内的某个页面
tapName : function(e){
var name = this.data.shops[e.currentTarget.dataset.id-1].name;
var id = e.currentTarget.dataset.id;
//小程序弹框:显示模态弹窗
wx.showModal({
title: '提示',
content: "选择了" + name + "餐厅",
showCancel: true,
success : function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
},
//无论成功失败都会执行的函数,下面的函数是 保留当前页面，跳转到应用内的某个页面(最多5级url)
complete: wx.navigateTo({
url: '/page/shop/shop?id=' + id
})
});
}
3.scroll-view:可滚动视图区域。
<scroll-view scroll-y="true" scroll-into-view="{{scrollIntoView}}" bindscroll="onScroll">
bindscroll:滚动时触发
4.为数据赋值
this.setData({
objectArray: this.data.objectArray
})
5.获取地理位置
wx.getLocation({
type: 'gcj02',
success: function (res) {
var latitude = res.latitude;
var longitude = res.longitude;
server.getJSON('/waimai/api/location.php', {
latitude: latitude,
longitude: longitude
}, function (res) {
console.log(res)
if (res.data.status != -1) {
self.setData({
address: res.data.result.address_component.street_number
});
} else {
self.setData({
address: '定位失败'
});
}
});
}
})
————————————————
版权声明：本文为CSDN博主「lizhen1114」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lizhen1114/java/article/details/79227121 CTRL+D快速收藏，欢迎常来喔
