【页面案例汇总】微信小程序排队取号页面

最新推荐文章于 2024-05-07 10:58:33 发布

米饭，℡

最新推荐文章于 2024-05-07 10:58:33 发布

阅读量82

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_42317757/article/details/134588786

版权

排队取号页面：

<template>
  <view class="container">
    <view class="title">排队取号</view>
    <view class="queue-num">当前排队号码: {{currentNum}}</view>
    <view class="queue-btns">
      <button class="queue-btn" @click="takeNumber()">取号</button>
      <button class="queue-btn" @click="nextNumber()">下一号</button>
      <button class="queue-btn" @click="reset()">重置</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentNum: 0,
    };
  },
  methods: {
    takeNumber() {
      this.currentNum++;
    },
    nextNumber() {
      this.currentNum++;
    },
    reset() {
      this.currentNum = 0;
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 24px;
  margin-top: 50px;
}
.queue-num {
  font-size: 48px;
  margin-top: 80px;
}
.queue-btns {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.queue-btn {
  font-size: 24px;
  padding: 10px 20px;
  margin: 0 20px;
  border: 1px solid #999;
  border-radius: 5px;
}
</style>

这个页面由一个标题、一个当前排队号码的显示、三个按钮组成。点击“取号”按钮可以将当前排队号码加一，点击“下一号”按钮也是将当前排队号码加一，点击“重置”按钮将当前排队号码重置为0。