小程序前端页面
带.的是类选择器page-section-gap
" />
.page-section-gap{
box-sizing:
border-box; //指定边框的宽高
padding:
0
30
rpx; //每边的填充边距,上下为0,左右为30
padding-left:
30
rpx
; //右边填充多少
padding-right:
30
rpx; //左边填充多少
font-size:
28
rpx; //属性设置字体大小
color:
#999999; //设置字体的颜色
margin: 0 auto; //设置所有外边距属性 auto 浏览器计算外边距。
margin-bottom:
10
rpx; //设置底边距为2厘米的段落
margin-top:
60
rpx; //设置头部空白的距离
border:
2
rpx
solid
#D9D9D9; //指定边框的宽度,样式(一般固定),颜色
position:
relative; //相对定位,也可以absolute绝对定位,但是后面要加left:100px;
top:200px;
font-size:
28
rpx;
//设置不同的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;
//
规定段落中的文本不进行换行,直到遇到
标签为止
标签为止
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:
20
rpx
40
rpx;
color:
#000;
}
如果出现滚动条时,
margin-top头部的冲边距离往里缩,就是隐藏这些-310rpx
.header.hidden {
margin-top:
-310
rpx;
}
3.
view 1 里面肯定还有很多view1.1,再设计他们
<
image
class=
"logo"
src=
"{{shop.img}}"
/
>
view 1
里面也会有样式,继
承他们 .header .logo
定
义图片向左浮动
view的宽,高,
边框的宽度,样式(一般固定),颜色
元素添加圆角边框
右边填充部分空白
.header
.logo {
float:
left;
width:
160
rpx;
height:
160
rpx;
border:
2
rpx
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:
20
rpx;
font-size:
36
rpx;
line-height:
60
rpx;
}
5.
view 1.2下面的view 1.3
<
view
class=
"welcome ellipsis">公告：欢迎光临{{shop.name}}！
view
>
.header
.welcome {
color:
#333;
font-size:
30
rpx;
width:
360
rpx;
line-height:
70
rpx;
}
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:
20
rpx;
}
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结束
1.第二个view <
view
class=
"content-container">
生成第二个view的类型
定义 里面元素生成的方式(横着还是竖着)
宽度和高度以子元素各自指定的内容为准
内边距的底部 空白
.content-container {
display:
-webkit-flex; //横向的
height:
100%;
box-sizing:
border-box;
padding-bottom:
100
rpx;
}
2.里面的滚动view1 ,里面又包含了两个view
<
scroll-view
class=
"classify-container"
scroll-y=
"true">
定义了:宽度,背景色,高度
.classify-container {
width:
150
rpx;
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:
30
rpx;
color:
#646464;
line-height:
1.2;
text-align:
left;
}
<
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:
20
rpx
25
rpx;
color:
#646464;
font-size:
30
rpx;
line-height:
30
rpx;
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:
20
rpx
30
rpx;
font-size:
36
rpx;
line-height:
40
rpx;
border-bottom:
1px
solid
#f7f7f7;
}
每次循环都会有一张图片
<
image
class=
"pic"
src=
"{{goods[id].pic}}">
image
>
.goods-container
.goods
.pic {
float:
left;
width:
130
rpx;
height:
130
rpx;
margin-right:
20
rpx;
}
后面还有一张图片:
<
view
class=
"addCart"
bindtap=
"tapAddCart"
data-id=
"{{id}}">
添加食物数量的
绝对定位,离右边,底部,多远,图片的宽度,高度,背景色,圆边
.goods-container
.goods
.addCart {
position:
absolute;
right:
30
rpx;
bottom:
30
rpx;
width:
64
rpx;
height:
64
rpx;
background:
#feb70f;
border-radius:
50%;
}
======以下是第三个大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">
.cart {
display:
-webkit-flex;
position:
absolute;
left:
0;
bottom:
0;
width:
100%;
height:
100
rpx;
background:
#fff;
}
<
view
class=
"data"
bindtap=
"showCartDetail">
-webkit-flex: 1;
/*border-top: 1rpx solid #e7e7e7;*/
}
1.纵向排布还是横向排布
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: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:可滚动视图区域。
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:
'定位失败'
});
}
});
}
})