@ -0,0 +1,78 @@ | |||
// components/list/list.js | |||
Component({ | |||
/** | |||
* 组件的属性列表 | |||
*/ | |||
properties: { | |||
}, | |||
/** | |||
* 组件的初始数据 | |||
*/ | |||
data: { | |||
flag1: 0, | |||
flag2: 0, | |||
flag3: 0, | |||
icon: ["/asset/img/icon-display1.png", | |||
"/asset/img/icon-display2.png"], | |||
star: ["/asset/img/icon-star.png", | |||
"/asset/img/redstar.png"], | |||
st: 0, | |||
display1 : 'none', | |||
display2: 'none', | |||
display3: 'none', | |||
certificates: ["身份证"] | |||
}, | |||
/** | |||
* 组件的方法列表 | |||
*/ | |||
methods: { | |||
onRet: function () { | |||
wx.reLaunch({ | |||
url: "/Pages/travel/home/home", | |||
}); | |||
}, | |||
hit: function () { | |||
this.setData({ | |||
display1: this.data.flag1 == 1 ? 'none' : 'block', | |||
flag1: this.data.flag1 == 0 ? 1 : 0 | |||
}) | |||
}, | |||
hit2: function () { | |||
this.setData({ | |||
display2: this.data.flag2 == 1 ? 'none' : 'block', | |||
flag2: this.data.flag2 == 0 ? 1 : 0 | |||
}) | |||
}, | |||
hitc: function () { | |||
this.setData({ | |||
display3: this.data.flag3 == 1 ? 'none' : 'block', | |||
flag3: this.data.flag3 == 0 ? 1 : 0 | |||
}) | |||
}, | |||
addPub: function(){ | |||
const length = this.data.pubBillNum.length | |||
}, | |||
addPrivate: function(){ | |||
const length = this.data.priBillNum.length | |||
this.setData({ | |||
priBillNum:this.data.priBillNum.concat([length+1]) | |||
}) | |||
}, | |||
emphasize:function(){ | |||
this.setData({ | |||
st: this.data.st == 0 ? 1 : 0 | |||
}) | |||
}, | |||
} | |||
}) |
@ -0,0 +1,4 @@ | |||
{ | |||
"component": true, | |||
"usingComponents": {} | |||
} |
@ -0,0 +1,54 @@ | |||
<!--components/list/list.wxml--> | |||
<!--TODO:解决添加时底部组件位置问题--> | |||
<!--这里有个疑问,就是点击加号应该是需要一个输入框来决定需要的东西到底是什么的,这个输入框可以用input来实现,通过一个变量来监视加号是否被点击, | |||
点击后,把键盘弹起,然后输入需要的物品,按下键盘的确定后,再去修改data中的数组,然后渲染到页面上来。 | |||
我的疑问就是,这样的做法需要的变量实在太多,需要频繁的setData,这样这个页面就会巨卡无比,所以现在很疑惑,没想到什么比较好的做法--> | |||
<view style="display: flex;"> | |||
<image class="navi" src="/asset/img/navi.png" bindtap="onRet"></image> | |||
<view style="padding: 0;margin: 0;width: 1px;height:700px;background-color: #7B8B6F;"></view> | |||
<view style="display: block"> | |||
<view class="title">物品准备清单</view> | |||
<view class="share" style="display:flex;"> | |||
<image class="display" src="{{icon[flag1]}}" bindtap="hit"></image> | |||
<text decode="true"> 共享清单</text> | |||
</view> | |||
<view style="display: {{display1}};"> | |||
<view class="card" style="display:block;"> | |||
<view style="display:flex;"> | |||
<image class="display" src="{{icon[flag3]}}" bindtap="hitc"></image> | |||
<text decode="true"> 证件类</text> | |||
</view> | |||
<view class="content" style="display: {{display3}};"> | |||
<view wx:for="{{certificates}}" wx:for-item="item"> | |||
<view style="display: flex;padding-bottom:10px;"> | |||
<image class="li" src="/asset/img/icon-li.png"></image> | |||
{{item}} | |||
<switch style="padding-left: 60px;height: 15px;" color="#D8CAAF"></switch> | |||
<image src="{{star[st]}}" class="star" bindtap="emphasize"></image> | |||
</view> | |||
</view> | |||
<button class="add" bindtap="addPub">+</button> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="share" style="display:flex;"> | |||
<image class="display" src="{{icon[flag2]}}" bindtap="hit2"></image> | |||
<text decode="true"> 私有清单</text> | |||
</view> | |||
<view style="display: {{display2}};"> | |||
<button class="add" bindtap="addPrivate">+</button> | |||
</view> | |||
</view> | |||
</view> |
@ -0,0 +1,80 @@ | |||
/* components/list/list.wxss */ | |||
.navi{ | |||
width: 40px; | |||
height: 30px; | |||
margin: 5px; | |||
padding-top: 10px; | |||
} | |||
.title{ | |||
position: relative; | |||
top: 20px; | |||
left: 15px; | |||
font-size: 22px; | |||
font-weight: 900; | |||
color: #000; | |||
} | |||
.share{ | |||
position: relative; | |||
padding: 20px; | |||
margin: 10px; | |||
top:10px; | |||
font-size: 17px; | |||
} | |||
.display{ | |||
width: 19px; | |||
height: 19px; | |||
} | |||
.add{ | |||
color: #7B8B6F; | |||
font-weight: 900; | |||
background-color: #F0EBE5; | |||
width: 40px; | |||
height: 40px; | |||
position: relative; | |||
} | |||
button { | |||
margin-left: 10px; | |||
padding-left: 10px; | |||
position: inherit; | |||
background: inherit; | |||
font-weight: bolder; | |||
} | |||
button:after { | |||
content: none; | |||
} | |||
button::after { | |||
border: none; | |||
} | |||
.card{ | |||
position: relative; | |||
left:50px; | |||
} | |||
.content{ | |||
padding: 20px; | |||
position: relative; | |||
font-size: 18px; | |||
text-align: center; | |||
} | |||
.li{ | |||
width: 10px; | |||
height: 10px; | |||
text-align: center; | |||
padding: 7.5px; | |||
} | |||
.star{ | |||
width: 25px; | |||
height: 25px; | |||
position: relative; | |||
padding-left: 10px; | |||
} |