Social wechat applet of fanzhihu forum community

WeChat official account ： Chuangxiang diary
send out ： Imitation zhihu
Get the full source code （ Static data ）, Just import wechat developer tool
explain ： The source code is mainly the front end , The back end can be developed by itself

---

1、 home page
List of questions
Topic list
Touch bottom load refresh

2、 List of questions and answers

3、 Find the page

4、 Notice list

5、 Direct messages

6、 My personal page

/**app.wxss**/
.container {
    
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /*padding: 200rpx 0;*/
  box-sizing: border-box;
  background: #F0F4F3;
}

.container.withtab{
    
  margin: 105rpx 0 0 0;
  /*top: 105rpx;*/
}
.flex-wrp{
    
  display: flex;
}
.flex-tab{
    
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: stretch;
}
.flex-item{
    
  flex-grow: 1;
  text-align: center;
}
.top-tab{
    
  width: 750rpx;
  height: 100rpx;
  background: #298DE5;
  color: #8CCEFD;
  font-size: 28rpx;
  line-height: 100rpx;
  box-shadow: 0 2px 2px #bebebe;
  margin: 0 0 8rpx 0;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.toptab.active{
    
  color: #ffffff;
  border-bottom: solid 2px #ffffff;
}
.container{
    
  padding: 0;
  font-size: 14rpx;
  color: #000;
}
.container .feed-item{
    
  width: 690rpx;
  padding: 30rpx 30rpx 20rpx;
  margin: 7rpx 0 6rpx 0;
  background: #ffffff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 5px #eeeeee;
}
.container .feed-item .feed-source{
    
  width: 690rpx;
  left: 0;
  height: 50rpx;
}
.container .feed-item .feed-source .avatar{
    
  position: relative;
  display: inline-block;
}
.container .feed-item .feed-source a{
    
  display: inline-block;
  height: 40rpx;
}
.container .feed-item .feed-source .avatar image{
    
  /*position: absolute;*/
  display: inline-block;
  width: 45rpx;
  height: 45rpx;
  border-radius: 45rpx;
  top: 10rpx;
  vertical-align: middle;
}
.container .feed-item .feed-source text{
    
  /*position: absolute;*/
  display: inline-block;
  height: 40rpx;
  line-height: 40rpx;
  vertical-align: middle;
  margin: 0 0 0 15rpx;
  color: #a0acac;
  font-size: 26rpx;
}
.container .feed-item .feed-source .item-more{
    
  display: inline-block;
  width: 40rpx;
  height: 45rpx;
  float: right;
}
.container .feed-item .feed-content{
    
  padding: 10rpx 0 0 0;
}
.container .feed-item .feed-content .question text{
    
  font-size: 28rpx;
  font-weight: 600px;
  line-height: 40rpx;
  text-space: 5rpx;
}
.container .feed-item .feed-content .answer-body{
    
  padding: 10rpx 0 0 0;
  /*height: 10rpx;*/
  font-size: 24rpx;
  line-height: 28rpx;
  color: #5b5b5b;
}
.container .feed-item .feed-content .answer-actions{
    
  width: 690rpx;
  padding: 10rpx 0  0;
  color: #a0acac;
}
.container .feed-item .feed-content .answer-actions view{
    
  display: inline-block;
  vertical-align: text-bottom;
  padding: 0 10rpx 0 0;
  font-size: 24rpx;
}
.container .feed-item .feed-content .answer-actions .dot ::after{
    
  content: "•";
}