微信小程序项目实例——印记

微信小程序项目实例——印记

项目代码见文字底部，点赞关注有惊喜

---

一、项目展示

印记是一款简洁便利的日记本，用户可以在其中发布自己的日记本，同时也可以查看、点赞和收藏别人的日记本

二、日记列表

日记列表展示所有的日记本，用户可以点击查看别人的日记

首页采用scroll-view组件实现页面滑动

  
    
    
      
        {{item.meta.title}}
        {{item.meta.meta}}
      
      
        
        {{item.meta.nickName}}
      
    
  

/** list.wxss **/

.item-container {
  margin: 10rpx 20rpx;
  position: relative;
}

.cover {
  width: 100%;
  height: 400rpx; 
  display: block;
}

.desc {
  margin: 10rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #E5E7ED;
}

.desc .left {
}

.desc .right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right image{
  display: block;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

实现效果如下：

三、日记发布

用户可以发布个人日记
日记的内容可以以文字、图片和视频组成

/** new.wxss **/

.container {
  height: 91%;
}

.common-container {
  margin: 0.1rem;
}

.item-group {
  display: flex;
  align-items: center;
}

.album-item {
  flex-direction: column;
  margin: 0.1rem;
  background: white;
  width: 6.4rem;
  height: 6.4rem;
}

.content-text{
  justify-content: center;
  align-items: center;
  display: flex;
}

.content-text view {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 15px;
}

.tabbar {
  position: fixed;
  width: 100%;
  height: 8%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tabbar .item {
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item .icon {
  width: 50rpx;
  height: 50rpx;
}

.input-container {
  height: 80%;
  background-color: #eceff4;
  background-image: linear-gradient(#E1E6EA .1em, transparent .1em);
  background-size: 100% 48rpx;
  padding: 0;
  box-sizing: border-box;
  margin: 0 10rpx;
}

.input-container input{
  height: 47rpx;
  max-height: 47rpx;
  font-size: 28rpx;
  margin: 0px;
}

.action-item, .action-cacel {
  font-size: 30rpx;
  color: #39b5de;
}

效果如下：

文末

具体的介绍就到这里了
印记包含了当下流行的日记类软件该有的功能
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载 小程序