仿知乎论坛社区社交微信小程序

简介: 仿知乎论坛社区社交微信小程序

1、首页

问题列表

话题列表

触底加载刷新


2fc362de518d46059e8d024bb766e720.png


2、问题列表及回答


03c2241a89b449968520ae27eeaf681b.png88e90acc7c7f421ea484780dc48cf743.png



3、发现页面


fb5a41b89e0d4f15bfd93a9abb4bf277.png


4、通知列表


02cbf78127cc42fb9e39da72e9aee83e.png


5、私信


af30da7bd7bb4ef684366a77640afd10.png


6、我的个人页


a0b8539e1f104c7789652867c94e3343.png


/**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: "•";
}



相关文章
|
7天前
|
存储 缓存 监控
社交软件红包技术解密(四):微信红包系统是如何应对高并发的
本文将为读者介绍微信百亿级别红包背后的高并发设计实践,内容包括微信红包系统的技术难点、解决高并发问题通常使用的方案,以及微信红包系统的所采用高并发解决方案。
42 13
|
5天前
|
存储 监控 容灾
社交软件红包技术解密(五):微信红包系统是如何实现高可用性的
本次分享介绍了微信红包后台系统的高可用实践经验,主要包括后台的 set 化设计、异步化设计、订单异地存储设计、存储层容灾设计与平行扩缩容等。听众可以了解到微信红包后台架构的设计细节,共同探讨高可用设计实践上遇到的问题与解决方案。
25 5
|
21天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
167 18
|
28天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
124 3
|
6月前
|
小程序 视频直播 UED
电商直播小程序系统开发:打造“直播+电商+社交”闭环
电商直播小程序成为商家与消费者互动的关键,通过微信提供的实时视频工具,实现流畅购物体验。系统功能包括直播预览、主播管理、红包互动、用户管理及闭环购物。它强化品牌效应,利用私域流量,简化流程并转化会员。开发涉及需求分析、设计规划、功能开发、测试优化及上线维护。企业需关注用户体验,以保持竞争力。寻求开发合作可联系相关人员。
|
6月前
|
小程序
知识社区在线提问小程序模板源码
知识社区在线提问小程序模板源码
141 3
|
2月前
|
存储 监控 算法
社交软件红包技术解密(三):微信摇一摇红包雨背后的技术细节
本文将由微信团队工程师张文瑞分享微信春节摇一摇红包技术背后的方方面面,希望能给同行们带来启发。
69 1
|
3月前
|
Web App开发 前端开发 程序员
将微信公众号文章同步到阿里云开发者社区
本文介绍了一种通过自己拓展的浏览器插件,便捷地将微信公众号文章同步到阿里云开发者社区的方法。
65 6
|
6月前
|
小程序
同城拼车社交微信小程序模板源码
同城拼车社交微信小程序模板源码
100 6
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序国产动漫论坛的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序国产动漫论坛的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章