小程式實現：TabBar,卡片佈局，箭頭樣式，頭像，星星評分,視訊筆記練習
阿新 • • 發佈：2018-12-13
底部選項卡TabBar ------------>app.json
{ "pages":[ "pages/index/index", "pages/message/message", "pages/profile/profile", "pages/shopList/shopList" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "color": "red", "selectedColor": "blue", "list": [ { "pagePath": "pages/index/index", "text": "首頁", "iconPath": "assets/tabs/home.png", "selectedIconPath": "assets/tabs/home-active.png" }, { "pagePath": "pages/message/message", "text": "訊息", "iconPath": "assets/tabs/message.png", "selectedIconPath": "assets/tabs/message-active.png" }, { "pagePath": "pages/profile/profile", "text": "個人中心", "iconPath": "assets/tabs/profile.png", "selectedIconPath": "assets/tabs/profile-active.png" } ] } }
卡片式佈局、樣式偽元素箭頭------->message.wxml
<view class="card"> <text class="card-title">標題</text> <text class="card-date">2018-10-5</text> <image class='card-img' src='https://image4.suning.cn/uimg/cms/img/153818701965058151.jpg?from=mobile'></image> <text class="card-desc">越努力，越幸運~</text> <text class="card-read arrow">檢視詳情</text> </view> <view class="card"> <text class="card-title">標題2</text> <text class="card-date">2018-10-5</text> <image class='card-img' src='https://image4.suning.cn/uimg/cms/img/153818701965058151.jpg?from=mobile'></image> <text class="card-desc">越努力，越幸運~</text> <text class="card-read arrow">檢視詳情</text> </view>
message.wxss
page{ background-color: #f1f1f1; } .card{ display: flex; flex-direction: column; background-color: #fff; margin: 60rpx 20rpx; padding: 20rpx 30rpx; border-radius: 15rpx; border: 1rpx solid #ddd; } .card-title{ font-size: 20px; margin-bottom: 20rpx; } .card-date{ font-size: 14px; color: #ccc; margin-bottom: 20rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #ddd; } .card-img{ height:400rpx; width: 100%; } .card-desc{ font-size: 16px; color: #333; margin-bottom: 20rpx; padding-top: 20rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #ddd; } .card-read{ font-size: 14px; color: #666; } /* 偽元素：畫上去的箭頭 */ .arrow{ display: flex; justify-content: space-between; align-items: center; } .arrow::after{ content: ""; width: 15rpx; height: 15rpx; border-top: 3rpx solid #ccc; border-right: 3rpx solid #ccc; transform: rotate(45deg); }
個人中心-------->profile.wxml
<view class="avatar">
<image src='/assets/tabs/avatar.png'></image>
</view>
<view class='divider'></view>
<view class='cell'>
<navigator class='cell-item'>
<text>個人資料</text>
</navigator>
<navigator class='cell-item arrow'>
<text>我的優惠券</text>
</navigator>
</view>
<view class='divider'></view>
<view class='cell'>
<navigator class='cell-item arrow'>
<text>常見問題</text>
</navigator>
<navigator class='cell-item arrow'>
<text>使用條款</text>
</navigator>
</view>
<view class='divider'></view>
<view class='cell'>
<navigator class='cell-item arrow'>
<text>設定</text>
</navigator>
</view>profile.wxss
page{
background-color: #f1f1f1;
}
.avatar{
background-color: #f60;
height: 400rpx;
/* 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
}
.avatar image{
height: 200rpx;
width: 200rpx;
/* 畫圈 */
border: 10rpx solid rgba(0, 0, 0, .1);
border-radius: 50%;
}
/* 間隔 */
.divider{
height: 20rpx;
}
.cell{
background-color: #fff;
font-size:16px;
}
.cell-item{
border-bottom: 1rpx solid #ddd;
padding: 20rpx 30rpx;
}
/* 箭頭 */
.arrow{
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow::after{
content: "";
width: 15rpx;
height: 15rpx;
border-top: 3rpx solid #ccc;
border-right: 3rpx solid #ccc;
transform: rotate(45deg);
}
美食-------->shopList.wxml
<view class='shop'>
<image class='shop-img' src='http://p1.meituan.net/200.0/dpdeal/5f37afe9ef2dc9c68db49dbe9bfb6c15419781.jpg'></image>
<view class='shop-info'>
<text class='shop-title ell'>店鋪名稱店鋪名稱店鋪名稱</text>
<text class='shop-tel'>電話:</text>
<text class='shop-address'>地址:</text>
<text class='shop-time'>營業時間:</text>
</view>
<view class='shop-star'>
<view class='star-after'>★★★★★</view>
<view class='star-before' style="width:50%;">★★★★★</view>
</view>
</view>
<view class="shop">
<image class="shop-img" src="http://p0.meituan.net/200.0/deal/[email protected]_0_800_800a%7C267h_267w_2e_90Q"></image>
<view class="shop-info">
<text class="shop-title ell">模板：店鋪名稱很長很長很長很長很長很長</text>
<text class="shop-tel">電話：</text>
<text class="shop-address">地址：</text>
<text class="shop-time">營業時間：</text>
</view>
<view class="shop-star">
<view class='star-after'>★★★★★</view>
<view class='star-before'style="width:90%;">★★★★★</view>
</view>
</view>
shopList.wxss
page{
background-color: #fff;
}
.shop{
display: flex;
padding: 20rpx;
flex-direction: row;
border-bottom:1rpx solid #ddd;
position: relative;
}
.shop-info{
width:400rpx;
display: flex;
flex-direction: column;
font-size: 12px;
color: #666;
}
.shop-img{
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.shop-title{
font-size: 16px;
color: #333;
width: 380rpx;
}
/*單行超出寬度變省略號 */
.ell{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 星星評分 */
.shop-star{
right: 20rpx;
top: 20rpx;
position: absolute;
}
.star-after{
color: #e2e2e2;
}
.star-before{
color: #f19e38;
position: absolute;
left: 0rpx;
top: 0rpx;
overflow: hidden;
}
