做一个uniapp设置页面
以下是一个简单的uniapp设置页面的示例代码:
<template>
<view class="container">
<view class="title">设置</view>
<view class="option">
<text>推送通知</text>
<switch class="switch" :checked="pushNotification" @change="togglePushNotification"></switch>
</view>
<view class="option">
<text>声音提示</text>
<switch class="switch" :checked="soundNotification" @change="toggleSoundNotification"></switch>
</view>
<button class="button" @tap="saveSettings">保存</button>
</view>
</template>
<script>
export default {
data() {
return {
pushNotification: true,
soundNotification: true
};
},
methods: {
togglePushNotification(value) {
this.pushNotification = value;
},
toggleSoundNotification(value) {
this.soundNotification = value;
},
saveSettings() {
// 保存设置逻辑
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.option {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin-bottom: 10px;
}
.switch {
margin-left: 10px;
}
.button {
width: 200px;
height: 40px;
background-color: #007aff;
color: #fff;
border-radius: 20px;
margin-top: 20px;
line-height: 40px;
text-align: center;
}
</style>
这个示例中的设置页面包含了两个开关选项,分别用来控制推送通知和声音提示的状态。用户可以通过点击开关来切换选项的状态,并且可以通过点击保存按钮来保存设置。你可以根据需求来自定义设置页面的样式和逻辑
原文地址: http://www.cveoy.top/t/topic/hQV3 著作权归作者所有。请勿转载和采集!