小程序前端页面

带.的是类选择器<view class=" 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;       // 规定段落中的文本不进行换行,直到遇到 <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:  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结束

===至下是内部第二个大view

第二个view里面包含两个scroll-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;

}

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:  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

< 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:  100 rpx;

   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:  '定位失败'

            });

          }

        });

      }

    })