小程序 好多样式 选择
<!-- 我的订单（tab） -->
<style >
.container {
height: 100%;
.dis_flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.youhui {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-around;
width: 750rpx;
height: 133rpx;
background: rgba(255, 255, 255, 1);
font-size: 28rpx;
font-family: PingFang-SC-Regular;
font-weight: 400;
color: #999999;
line-height: 133rpx;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.active {
font-size: 34rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #F83E4D;
line-height: 133rpx;
position: relative;
}
.active:before {
content: '';
position: absolute;
left: 0rpx;
bottom: 30rpx;
width: 100%;
height: 5rpx;
background: linear-gradient(88deg, rgba(249, 87, 56, 1) 0%, rgba(248, 39, 96, 1) 100%);
border-radius: 3rpx;
}
.yohui_article {
width: 750rpx;
}
.swiper-box {
height: 100vh;
}
.middle {
margin-top: 20rpx;
width: 710rpx;
height: 370rpx;
background: #fff;
border-radius: 12rpx;
margin-left: 20rpx;
.name {
height: 104rpx;
.dis_flex;
.left {
padding-left: 30rpx;
.dis_flex;
image {
width: 40rpx;
height: 36rpx;
}
text {
padding-left: 18rpx;
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #666;
}
}
.right {
padding-right: 30rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #F83E4D;
}
}
.info {
.dis_flex;
align-items: normal;
.left {
.dis_flex;
align-items: normal;
.img {
padding-left: 30rpx;
padding-right: 20rpx;
image {
width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
}
}
.time {
font-size: 24rpx;
font-family: PingFang-SC-Regular;
font-weight: 400;
color: #999999;
margin-top: 20rpx;
}
}
.right {
padding-right: 30rpx;
padding-left: 40rpx;
.bigt {
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #666666;
}
.samllt {
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #BBBBBB;
text-align: right;
}
}
}
.price {
.button {
button {
width: 160rpx;
height: 65rpx;
background: linear-gradient(100deg, rgba(249, 87, 56, 1) 0%, rgba(248, 39, 96, 1) 100%);
border-radius: 33rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 65rpx;
float: right;
margin-right: 30rpx;
}
}
}
.price_use {
.button {
button {
width: 160rpx;
height: 65rpx;
border: 3rpx solid #F95738;
border-radius: 33rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #F83E4D;
text-align: center;
line-height: 65rpx;
float: right;
margin-right: 30rpx;
background: #fff;
}
}
}
.price_gray {
.button {
button {
width: 160rpx;
height: 65rpx;
border: 3rpx solid #DDDDDD;
border-radius: 33rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #999999;
text-align: center;
line-height: 65rpx;
float: right;
margin-right: 30rpx;
background: #fff;
}
}
}
.price_cancel {
.button {
button {
border: none;
float: right;
margin-right: 30rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #BBBBBB;
background: #fff;
}
button::after {
border: none !important;
}
}
}
}
.middle:last-child {
margin-bottom: 30rpx;
}
}
</style>
<template>
<view class="container">
<view class="youhui">
<view class="{{_num==0?'active':''}}" data-index='0' bindtap='toggle'>
全部订单
</view>
<view class="{{_num==1?'active':''}}" data-index='1' bindtap='toggle'>
待使用
</view>
<view class="{{_num==2?'active':''}}" data-index='2' bindtap='toggle'>
待分享
</view>
</view>
<view ></view>
<!-- -->
<swiper current="{{_num}}" class="swiper-box" duration="200" bindchange="bindChange">
<!-- 未使用 -->
<swiper-item>
<scroll-view scroll-y scroll-with-animation >
<view class="yohui_article">
<block wx:for="{{array}}" wx:key="item" wx:for-index="key">
<view class="middle">
<view class="name">
<view class="left">
<image src="../../images/shangdian.png" mode="aspectFill" lazy-load="false" />
<text>金地澜 · 海鑫生鲜</text>
</view>
</view>
<view class="info">
<view class="left">
<view class="img">
<image src="http://wx1.sinaimg.cn/large/006VtoKely1fjk4hsoeooj30dw0dw76f.jpg" mode="aspectFill" lazy-load="false" />
</view>
<view >
<wxc-elip line="2" >这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。</wxc-elip>
<view class="time">2018-12-09 14:05:18</view>
</view>
</view>
<view class="right">
<view class="bigt">￥79.9</view>
</view>
</view>
<!-- 待分享 -->
<view class="{{item.class}}">
<view class="button">
<form report-submit="true" @submit="submit" bindtap="showPopupshow">
<button form-type="submit" class="">
{{item.textname}}
</button>
</form>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<wxc-popup class="J_Popup_show" animation-mode="bottom" align="bottom" >
<view class="J_Popup_show">
<share></share>
</view>
</wxc-popup>
</swiper-item>
<!-- 已使用 -->
<swiper-item>
<view class="yohui_article youhui_article1">
222
</view>
</swiper-item>
<!-- 已过期 -->
<swiper-item>
<view class="yohui_article youhui_article2">
333
</view>
</swiper-item>
</swiper>
</view>
</template>
<script >
import wepy from 'wepy'
import {
debug,
api,
msg,
user,
lang,
utils
} from '../../libs/index'
import share from '../../components/share'
export default class MineOrder extends wepy.page {
config = {
navigationBarTitleText: '我的订单',
usingComponents: {
'wxc-elip': '../../packages/@minui/wxc-elip/dist/index',
'wxc-popup': './../packages/@minui/wxc-popup/dist/index'
}
}
data = {
state: 0,
_num: '0',
array: [{
name: '1100',
class: 'price',
textname: '待分享'
},
{
name: '1100',
class: 'price_use',
textname: '待使用'
},
{
name: '1100',
class: 'price_gray',
textname: '待评价'
},
{
name: '1100',
class: 'price_cancel',
textname: '已取消'
}, {
name: '1100',
class: 'price_use',
textname: '已取消'
}, {
name: '1100',
class: 'price_use',
textname: '已取消'
}, {
name: '1100',
class: 'price_use',
textname: '已取消'
},
]
}
events = {}
components = {
share
}
mixins = []
watch = {}
methods = {
// detailsSubmit(e) {
// console.log("你好")
// utils.sendFormIdAndNavigateTo(e, '../order/details')
// }
showPopupshow() {
let popupComponent = this.$wxpage.selectComponent('.J_Popup_show');
popupComponent && popupComponent.show();
},
}
onLoad() {}
onShow() {}
onRoute() {}
onReady() {}
onUnload() {}
onPullDownRefresh() {}
onReachBottom() {}
onPageScroll(e) {}
onShareAppMessage(e) {}
toggle(e) {
console.log(e.currentTarget.dataset.index);
if (this.data._num === e.currentTarget.dataset.index) {
return false;
} else {
// this.setData({
// _num: e.currentTarget.dataset.index
// })
this._num = e.currentTarget.dataset.index
this.$apply();
}
}
bindChange(e) {
var that = this;
console.log(e)
// that.setData({
// _num: e.detail.current
// });
that._num = e.detail.current
that.$apply();
switch (e.detail.current) {
case 0:
that.data.state = 0
break;
case 1:
that.data.state = 1
break;
case 2:
that.data.state = 2
break;
}
}
</script>
- 上一篇 »CSS样式语法
- 下一篇 »微信小程序学习笔记，1-微信小程序样式设置逻辑