微信公众号:创享日记
发送:仿知乎
获取完整源码(静态数据),导入微信开发者工具即可
说明:源码主要是前端,后端可自行开发
1、首页
问题列表
话题列表
触底加载刷新
2、问题列表及回答
3、发现页面
4、通知列表
5、私信
6、我的个人页
/**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: "•";
}