本文给大家带来的是微信小程序V2EX社区帖子发布页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<include src="/components/header.wxml" />
<view class="container">
<view class="commentbox">
<view>你在想什么？
<text>{{words}}</text>
</view>
<form>
<textarea maxlength="500" disabled="{{inputDisabled}}" bindinput="countWords"></textarea>
<button>发布</button>
</form>
</view>
<view class="timeline">
<view class="tab-bar">
<text id="timeline" bindtap="toggleBar" class="{{isTimeLine ? 'active' : ''}}">TimeLine</text>
<text id="mentions" bindtap="toggleBar" class="{{isTimeLine ? '' : 'active'}}">Mentions</text>
</view>
<navigator>浏览时间轴更多内容</navigator>
</view>
</view>
<include src="/components/footer.wxml" />
|
二、wxss样式文件代码如下：
/*******容器********/
.container {
display: flex;
flex-direction: column;
width: 95%;
margin: 0 auto;
}
.container > view {
margin-bottom: 15rpx;
border-radius: 10rpx;
background-color: #fefefe;
box-shadow: 2px 2px 3px #00343f;
}
/*******容器********/
/*******评论框******/
.commentbox > view{
display: flex;
justify-content: space-between;
color: #999;
font-size: 23rpx;
padding: 10rpx;
}
.commentbox textarea{
width: 100%;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background-color: #eee;
padding: 20rpx;
box-sizing: border-box;
}
.commentbox button {
font-size: 28rpx;
font-weight: bold;
}
/*******评论框******/
/*******时间线********/
.tab-bar{
border-bottom: 1px solid #999;
padding: 10rpx;
}
.tab-bar text{
margin: 0 10rpx;
font-size: 26rpx;
padding: 5rpx 10rpx;
border-radius: 5rpx;
}
.tab-bar text.active{
background-color: #00343f;
color: #f2efe6;
}
.timeline navigator{
padding: 10rpx;
display: flex;
justify-content: flex-end;
font-size: 25rpx;
}
.timeline navigator::after{
content: '➤'
}
/*******时间线********/
|
三、js页面代码如下：
Page({
data:{
words: 500,
isTimeLine: true,
inputDisabled: false
},
toggleBar(e) {
if (e.target.id === 'timeline') {
this.setData({ isTimeLine: true })
} else {
this.setData({ isTimeLine: false })
}
},
countWords(e) {
let wordsLen = e.detail.value.length
this.setData({ words: 500 - wordsLen })
}
})
|
.jpg)
.jpg)
