仿糗事百科微信小程序

2019年12月26日

一.开发前准备

1.设计稿准备

2.各个页面的图片转变

二.具体实现

1.顶部滚动菜单实现

image.png

.scroll-view_H {
  margin-left: 10px;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.normal {
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
}

.select {
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  font-weight: bold;
}

2.顶部滚动菜单切换效果实现

image.png

  switchNav: function(e) {
    console.log(e);
    var page = this;
    var id = e.target.id;
    if (this.data.currentTab == id) {
      return false;
    } else {
      page.setData({
        currentTab: id
      });
    }
    page.setData({
      flag: id
    });
  },

3.单个糗事列表实现

image.png image.png

4.视频列表实现

image.png

5.分享设计实现

image.png