2019年12月26日

一.開(kāi)發(fā)前準(zhǔn)備

1.設(shè)計(jì)稿準(zhǔn)備

2.各個(gè)頁(yè)面的圖片轉(zhuǎn)變

二.首頁(yè)實(shí)現(xiàn)

1.底部menuBar設(shè)置

image.png

2.首頁(yè)輪播圖設(shè)計(jì)

image.png

3.首頁(yè)九宮格設(shè)計(jì)

image.png

.item {
  margin-top: 15px;
  text-align: center;
  font-family: "Microsoft YaHei";
  font-size: 13px;
  width: 60px;
  display: inline-block;
  margin-right: 10px;
}

image.png

4.全部分類(lèi)設(shè)計(jì)

image.png

image.png

.item {
  border: 1px solid #ccc;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.navs {
  display: flex;
  flex-direction: row;
  text-align: center;
  font-size: 13px;
  margin-bottom: 10px;
  padding-top: 10px;
}

.nav {
  margin: 0 auto;
  width: 70px;
}

三.現(xiàn)金券模塊實(shí)現(xiàn)

1.頂部下來(lái)篩選功能實(shí)現(xiàn)

image.png

.menu {
  display: block;
  height: 38px;
}

.menu dt {
  font-size: 13px;
  float: left;
  width: 49.7%;
  height: 38px;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
  line-height: 38px;
  background-color: #fff;
}

.menu dd {
  position: absolute;
  width: 100%;
  top: 40px;
  left: 0;
  z-index: 999;
}

.menu li {
  font-size: 14px;
  background-color: #f3f1ef;
  line-height: 40px;
  display: block;
  padding-left: 8px;
  border-bottom: 1px solid #fff;
}

.select {
  color: red;
}

.show {
  display: block;
}

.hidden {
  display: none;
}

Page({
  data: {
    subMenuDispaly: initSubMenuDisplay(),
    currentTab: -1
  },
  tapMainMenu: function(e) {
    console.log(e);
    var index = parseInt(e.currentTarget.dataset.index);
    console.log(index);
    var newSubMenuDisplay = initSubMenuDisplay();
    if (this.data.subMenuDispaly[index] == 'hidden') {
      newSubMenuDisplay[index] = 'show';
      this.setData({
        currentTab: index
      });
    } else {
      newSubMenuDisplay[index] = 'hidden';
      this.setData({
        currentTab: -1
      });
    }
    this.setData({
      subMenuDispaly: newSubMenuDisplay
    });
  }
})

2.現(xiàn)金券列表

image.png

四.婚博會(huì)模塊實(shí)現(xiàn)

1.提交表單實(shí)現(xiàn)

image.png

不能提交button的值，所以要重新復(fù)制

  formSubmit: function(e) {
    console.log(e);
    var ticket = e.detail.value;
    ticket.way = this.data.way;
    wx.setStorageSync('ticket', ticket);
  }

2.彈框選擇分類(lèi)模塊實(shí)現(xiàn)

image.png

image.png