小程序前端页面（总结）

带.的是类选择器<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 .pic {
  float: left;
  width: 130rpx;
  height: 130rpx;
  margin-right: 20rpx;
}

======至此第二个大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: '定位失败'
            });
          }
        });
      }
    })

原文：https://blog.csdn.net/lizhen1114/article/details/79227121