纪念页面按钮和背景色

pages/commemorate/commemorate.js

@@ -5,7 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    currentPage: '' // 初始值为空
   },
 
   /**
@@ -62,5 +62,18 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+
+  showPage1: function() {
+    this.setData({
+      currentPage: 'page1',// 显示页面1
+    });
+  },
+
+  showPage2: function() {
+    this.setData({
+      currentPage: 'page2', // 显示页面2
+    });
   }
+
 })

pages/commemorate/commemorate.wxml

@@ -1 +1,12 @@
-<text>纪念哦</text>
+<view class="button-container">
+  <button bindtap="showPage1" class="b1">纪念票</button>
+  <button bindtap="showPage2" class="b2">纪念册</button>
+</view>
+
+<view wx:if="{{currentPage === 'page1'}}" class="v1" style="width:max-width; height:1000rpx;">
+    <text>1</text>>
+  </view>
+
+  <view wx:if="{{currentPage === 'page2'}}" class="v2" style="width:max-width; height:1000rpx;">
+    <text>2</text>>
+  </view>

pages/commemorate/commemorate.wxss

@@ -1 +1,23 @@
 /* pages/commemorate/commemorate.wxss */
+.button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color:rgb(99, 195, 240)
+}
+
+.b1 {
+  background-color: rgb(171, 238, 16);
+}
+
+.b2 {
+  background-color: rgb(221, 218, 55);
+}
+
+.v1 {
+  background-color: rgb(99, 195, 240);
+}
+
+.v2 {
+  background-color: rgb(99, 195, 240);
+}