微信小程序项目实例——印记
文章目录
项目代码见文字底部，点赞关注有惊喜
一、项目展示
印记是一款简洁便利的日记本，用户可以在其中发布自己的日记本，同时也可以查看、点赞和收藏别人的日记本
二、日记列表
日记列表展示所有的日记本，用户可以点击查看别人的日记
首页采用scroll-view组件实现页面滑动
<!--list.wxml-->
<scroll-view scroll-y="true">
<view wx:for="{
{diaries}}" wx:for-index="idx" class="item-container" bindtap="showDetail" id="{
{idx}}">
<image mode="aspectFill" src="{
{item.meta.cover}}" class="cover"></image>
<view class="desc">
<view class="left">
<view style="font-size:32rpx;margin:10rpx 0;">{
{item.meta.title}}</view>
<view style="font-size:24rpx;color:darkgray">{
{item.meta.meta}}</view>
</view>
<view class="right">
<image mode="aspectFit" src="{
{item.meta.avatar}}"></image>
<text style="font-size:24rpx;margin-top:10rpx;color:darkgray">{
{item.meta.nickName}}</text>
</view>
</view>
</view>
</scroll-view>
/** 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;
}
实现效果如下：
三、日记发布
用户可以发布个人日记
日记的内容可以以文字、图片和视频组成
扫描二维码关注公众号，回复：
14123955 查看本文章
<!--new.wxml-->
<template name="common">
<scroll-view class="container" scroll-y="true">
<view class="common-container">
<view class="item-group" wx:for="{
{layoutList}}" wx:for-item="group">
<block wx:for="{
{group}}" wx:for-item="item">
<block wx:if="{
{item.type == 'TEXT'}}">
<view class="album-item content-text">
<view>{
{item.content}}</view>
</view>
</block>
<block wx:elif="{
{item.type == 'IMAGE'}}">
<image src="{
{item.content}}" class="album-item" mode="aspectFill"></image>
</block>
<block wx:elif="{
{item.type == 'VIDEO'}}">
<video class="album-item" src="{
{item.content}}"></video>
</block>
</block>
</view>
</view>
</scroll-view>
<view class="tabbar" style="display:{
{showTab ? 'flex' : 'none'}};">
<view class="item" bindtap="inputTouch">
<image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image>
</view>
<view class="item" bindtap="mediaTouch">
<image class="icon" mode="aspectFit" src="../../images/tabbar/image.png"></image>
</view>
<view class="item">
<image class="icon" mode="aspectFit" src="../../images/tabbar/more.png"></image>
</view>
</view>
<action-sheet hidden="{
{mediaActionSheetHidden}}" bindchange="mediaActionSheetChange">
<block wx:for-items="{
{mediaActionSheetItems}}" wx:for-index="id">
<action-sheet-item class="action-item" bindtap="{
{mediaActionSheetBinds[id]}}">
{
{item}}
</action-sheet-item>
</block>
<action-sheet-cancel class='action-cacel'>取消</action-sheet-cancel>
</action-sheet>
</template>
<template name="inputText">
<view class="input-container">
<view style="height:47rpx" wx:for="{
{inputStatus.lines}}" wx:for-index="idx">
<input type="text" data-index="{
{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{
{item}}" auto-focus="{
{idx == inputStatus.row ? true : false}}" bindfocus="focusInput"/>
</view>
</view>
<view class="tabbar">
<view class="item" style="width:50%" bindtap="inputCancel">
<image class="icon" mode="aspectFit" src="../../images/tabbar/cancel.png"></image>
</view>
<view class="item" style="width:50%" bindtap="inputDone">
<image class="icon" mode="aspectFit" src="../../images/tabbar/ok.png"></image>
</view>
</view>
</template>
<view style="width:100%;height:100%">
<block wx:if="{
{showMode == 'common'}}">
<template is="{
{showMode}}" data="{
{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds, layoutList: layoutList}}"></template>
</block>
<block wx:if="{
{showMode == 'inputText'}}">
<template is="{
{showMode}}" data="{
{inputStatus}}"></template>
</block>
<loading hidden="{
{!showLoading}}" bindchange="hideLoading">
{
{loadingMessage}}
</loading>
</view>
/** 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;
}
效果如下：
文末
具体的介绍就到这里了
印记包含了当下流行的日记类软件该有的功能
有兴趣的同学可以继续研究
代码放到下面链接里了
