本文给大家带来的是微信小程序V2EX社区论坛添加回复页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<include src="/components/header.wxml" />
<view class="container">
<view class="content">
<view class="title">{{title}}</view>
<image src="https:{{avatar}}"></image>
<rich-text nodes="{{nodes}}"></rich-text>
</view>
<view class="replies">
</view>
<view wx:if="{{true}}" class="reply">
<view class="userInfo">
<image src="https:{{userData.avatar_mini}}"></image>
{{userData.username}}
</view>
<form>
<textarea></textarea>
<button>添加回复</button>
</form>
</view>
</view>
<include src="/components/footer.wxml" />
|
二、wxss样式文件代码如下:
/******容器******/
.container {
display: flex;
flex-direction: column;
width: 95%;
margin: 0 auto;
}
.container > view {
display: flex;
margin-bottom: 15rpx;
border-radius: 10rpx;
background-color: #fefefe;
box-shadow: 2px 2px 3px #00343f;
}
/******容器******/
/******内容******/
.content{
position: relative;
flex-direction: column;
}
.content .title{
margin: 50rpx 90rpx 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
.content image{
position: absolute;
top: 20rpx;
right: 20rpx;
width: 70rpx;
height: 70rpx;
}
.content rich-text {
margin: 30rpx 0;
padding: 10rpx;
overflow: hidden;
}
/******内容******/
/******回复框******/
.reply{
flex-direction: column;
}
.reply .userInfo{
padding: 10rpx;
margin: 10rpx auto;
width: 95%;
display: flex;
align-items: center;
font-size: 25rpx;
border-bottom: 1px solid #ddd;
}
.reply .userInfo image{
margin-right: 10rpx;
width: 32rpx;
height: 32rpx;
border-radius: 6rpx;
}
.reply form{
margin: 0 auto;
width: 95%;
}
.reply textarea{
padding: 10rpx;
box-sizing: border-box;
width: 100%;
height: 250rpx;
border: 1px solid #ddd;
border-radius: 10rpx;
margin-bottom: 10rpx;
}
.reply button{
width: 100%;
height: 60rpx;
font-size: 28rpx;
font-weight: bold;
background: linear-gradient(to bottom, #fff, #ddd);
margin-bottom: 15rpx;
}
/******回复框******/
|
三、js页面代码如下:
Page({
onLoad(option) {
this.render()
},
render() {
let
globalData = getApp().globalData,
contentData = globalData.contentData,
userData = globalData.userInfo
this.setData({
nodes: contentData.content,
avatar: contentData.avatar,
title: contentData.title,
userData
})
}
})
|