You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.1 KiB
103 lines
2.1 KiB
<template> |
|
<div class="wrapper"> |
|
<text class="nav-text">左侧列表</text> |
|
<list class="list-wrapper"> |
|
<cell v-for="item in lists" :key="item.id"> |
|
<div class="text-wrapper" @click="clickitem(item.id)"> |
|
<text style="font-size: 30rpx; ">{{item.name}}</text> |
|
<text class="icon"></text> |
|
</div> |
|
</cell> |
|
</list> |
|
<div style="flex: 1; text-align: center;"> |
|
<div class="close-drawer" @click="hideDrawer"> |
|
<text style="font-size: 34rpx; text-align: center;">关闭抽屉</text> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
lists: [], |
|
} |
|
}, |
|
beforeCreate() { |
|
const domModule = weex.requireModule('dom') |
|
domModule.addRule('fontFace', { |
|
fontFamily: "unibtn", |
|
'src': "url('../../../../static/uni.ttf')" |
|
}); |
|
}, |
|
created() { |
|
for(let i = 0; i < 5; i++){ |
|
this.lists.push({ |
|
id: i, |
|
name: 'Item' + i, |
|
}); |
|
} |
|
}, |
|
methods: { |
|
hideDrawer() { |
|
uni.getCurrentSubNVue().hide('auto') |
|
}, |
|
clickitem(e) { |
|
uni.$emit('drawer-page', e); |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.wrapper { |
|
flex-direction: column; |
|
flex: 1; |
|
text-align: center; |
|
padding: 60rpx 0rpx 0rpx 20rpx; |
|
background-color: #F4F5F6; |
|
} |
|
.nav-text { |
|
color: #8f8f94; |
|
/* #ifndef APP-PLUS-NVUE */ |
|
margin-bottom: 40px; |
|
/* #endif */ |
|
/* #ifdef APP-PLUS-NVUE */ |
|
margin-bottom: 40rpx; |
|
/* #endif */ |
|
} |
|
.list-wrapper { |
|
/* #ifdef APP-PLUS-NVUE */ |
|
height: 450rpx; |
|
/* #endif */ |
|
/* #ifndef APP-PLUS-NVUE */ |
|
height: 450px; |
|
/* #endif */ |
|
} |
|
.text-wrapper { |
|
justify-content: center; |
|
border-bottom-style: solid; |
|
border-bottom-width: 1rpx; |
|
border-bottom-color: rgba(0,0,0,.2); |
|
margin-bottom: 35rpx; |
|
padding-bottom: 15rpx; |
|
} |
|
.close-drawer { |
|
background-color: #f8f8f8; |
|
width: 300rpx; |
|
padding: 15rpx; |
|
border-radius: 20rpx; |
|
border-style: solid; |
|
border-width: 1rpx; |
|
border-color: rgba(0,0,0,.2); |
|
} |
|
.icon { |
|
position: absolute; |
|
right: 10rpx; |
|
color: #000000; |
|
font-family: unibtn; |
|
font-size: 30rpx; |
|
font-weight: 400; |
|
} |
|
</style>
|
|
|