以下是一个简单的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>

这个示例中的设置页面包含了两个开关选项,分别用来控制推送通知和声音提示的状态。用户可以通过点击开关来切换选项的状态,并且可以通过点击保存按钮来保存设置。你可以根据需求来自定义设置页面的样式和逻辑

做一个uniapp设置页面

原文地址: http://www.cveoy.top/t/topic/hQV3 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录