仿今日头条微信小程序

2019年12月28日

一.首页

1.通用搜索框（今日头条）

image.png

.bg {
  background-color: #d53c3e;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.name {
  width: 30%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.search {
  width: 70%;
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  height: 25px;
  margin-right: 10px;
  background-color: #f6f5f3;
  border-radius: 5px;
  align-items: center;
}

.search image {
  margin-left: 10px;
}

.search input {
  margin-left: 10px;
  font-size: 13px;
}

2.顶部滚动菜单实现

image.png

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

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

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

var app = getApp()
Page({
  data: {
    flag: 0,
  },
  onLoad: function() {
    
  },
  switchNav: function(e) {
    var id = e.target.id;
    var page = this;
    if (this.data.flag == id) {
      return false;
    } else {
      page.setData({
        flag: id
      });
    }
  }
  
})

3.顶部导航栏切换效果

image.png

4.列表内容

image.png

5.详情页面底部固定

image.png

二.我的界面实现

1.水平均分框样式 带间隔符号

image.png

.count {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.desc {
  width: 33%;
  text-align: center;
  font-size: 13px;
  color: #fff;
  line-height: 20px;
  border-right: 1px solid #ccc;
}

2.列表式导航

image.png

.item {
  display: flex;
  flex-direction: row;
}

.title {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  font-size: 15px;
}

.detail2 {
  font-size: 15px;
  position: absolute;
  right: 10px;
  height: 50px;
  line-height: 50px;
  color: #888;
}

3.系统设置 通用页面 【 样式和上面一样】

image.png