小程式前端頁面（總結）
帶.的是類選擇器<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