信管117109黄得威6.18实习日志

1、底部导航条的实现

"tabBar": {

"color": "#666",

"selectedColor": "#5fdec9",

"list": [

{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "pages/assets/icons/home.png",

"selectedIconPath": "pages/assets/icons/achome.png"

},

{

"pagePath": "pages/Classify/Classify",

"text": "分类",

"iconPath": "pages/assets/icons/classify.png",

"selectedIconPath": "pages/assets/icons/acclassify.png"

},

{

"pagePath": "pages/shopcar/shopcar",

"text": "购物车",

"iconPath": "pages/assets/icons/mine.png",

"selectedIconPath": "pages/assets/icons/acmine.png"

},

{

"pagePath": "pages/mine/mine",

"text": "我的",

"iconPath": "pages/assets/icons/shopcart.png",

"selectedIconPath": "pages/assets/icons/acshopcart.png"

}

2、骰子算法的实现

mine.wxml：

<view class="first-face">

<span class="pip"></span>

</view>

<view class="second-face">

<span class="pip"></span>

<span class="pip"></span>

</view>

<view class="third-face">

<span class="pip"></span>

<span class="pip"></span>

<span class="pip"></span>

</view>

<view class="fourth-face">

<view class="column">

<span class="pip"></span>

<span class="pip"></span>

</view>

<view class="column">

<span class="pip"></span>

<span class="pip"></span>

</view>

</view>

<view class="fifth-face">

<view class="column">

<span class="pip"></span>

<span class="pip"></span>

</view>

<view class="column">

<span class="pip"></span>

</view>

<view class="column">

<span class="pip"></span>

<span class="pip"></span>

</view>

</view>

<view class="sixth-face">

<view class="column">

<span class="pip"></span>

<span class="pip"></span>

<span class="pip"></span>

</view>

<view class="column">

<span class="pip"></span>

<span class="pip"></span>

<span class="pip"></span>

</view>

</view>

 

mine.wxss：

.first-face {

display: flex;

justify-content: center;

align-items: center;

}

 

.second-face {

display: flex;

justify-content: space-between;

}

 

.second-face .pip:nth-of-type(2) {

align-self: flex-end;

}

 

.third-face {

display: flex;

justify-content: space-between;

}

.third-face .pip:nth-of-type(2) {

align-self: center;

}

 

.third-face .pip:nth-of-type(3) {

align-self: flex-end;

}

 

.fourth-face, .sixth-face {

display: flex;

justify-content: space-between;

}

 

.fourth-face .column, .sixth-face .column {

display: flex;

flex-direction: column;

justify-content: space-between;

}

 

.fifth-face {

display: flex;

justify-content: space-between;

}

.fifth-face .column {

display: flex;

flex-direction: column;

justify-content: space-between;

}

.fifth-face .column:nth-of-type(2) {

justify-content: center;

}

 

/* OTHER STYLES */

 

html, body {

height: 100%;

}

 

body {

display: flex;

align-items: center;

justify-content: center;

vertical-align: center;

flex-wrap: wrap;

align-content: center;

font-family: 'Open Sans', sans-serif;

background: linear-gradient(top, #222, #333);

}

 

[class$="face"] {

margin: 16px;

padding: 4px;

background-color: #e7e7e7;

width: 104px;

height: 104px;

object-fit: contain;

box-shadow:

inset 0 5px white,

inset 0 -5px #bbb,

inset 5px 0 #d7d7d7,

inset -5px 0 #d7d7d7;

border-radius: 10%;

}

 

.pip {

display: block;

width: 24px;

height: 24px;

border-radius: 50%;

margin: 4px;

 

background-color: #333;

box-shadow: inset 0 3px #111, inset 0 -3px #555;

}