博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;
🍅希望此文章可以帮助到您🍅
微信小程序文章推荐
效果显示
说明:此页面中,发送评论按钮的输入框和“确认发送”的按钮不会随着页面的滑动而滚动;就是上图显示的效果
一、帖子评论界面
<view class="tipInforyinhuan">
<view class="startinfor">
<view class="listZoomyh">
<view style="display: flex;flex-direction: row;align-items: center;color: #333;font-weight: bold;">
<image src="../image/stuimg.png" mode="" style="width:90rpx;height: 90rpx;" />
<view style="margin-left: 15rpx;">
<view>
{{codeModel.topicUserName}}
</view>
<view>
{{codeModel.topicTime}}
</view>
</view>
</view>
<view style="margin-top: 15rpx;">
{{codeModel.topicTitle}}
</view>
<view>
{{codeModel.topicInfor}}
</view>
<image src="{{imagePath}}{{codeModel.topicImg}}" style="width: 350rpx;height: 350rpx;border-radius: 2rpx;margin-top: 10rpx;" mode='aspectFill'></image>
</view>
</view>
<view style="margin-top: 25rpx;font-size: 32rpx;font-weight: bold;">评论信息</view>
<view style="margin-bottom: 100rpx;">
<view wx:for="{{resultData}}" wx:key="{{index}}" data-index="{{index}}" bindtap="lookCompany">
<view style="margin-top:30rpx">
<view style="display: flex;flex-direction: row;align-items: center;color: #333;">
<image src="../image/stuimg.png" mode="" style="width:90rpx;height: 90rpx;" />
<view style="margin-left: 15rpx;">
<view>
{{item.reviewUserName}}
</view>
<view>
{{item.reviewTime}}
</view>
</view>
</view>
<view style="margin-top: 15rpx;margin-left: 90rpx;">
{{item.reviewContent}}
</view>
</view>
</view>
</view>
</view>
这块是设置底部的布局页面
<view style="position: fixed;bottom: 0rpx;width: 100%;">
<view style="background-color: #fff;padding: 25rpx;">
<view style="display: flex;flex-direction: row;">
<input type="text" placeholder="请输入评论内容" bindinput="accountInput" style="background-color: #f5f5f5;border-radius: 45rpx;padding: 15rpx;width: 75%;" />
<view style="color: #f00;font-weight: bold;width: 25%;text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center;" bind:tap="sendReview">确认发送</view>
</view>
</view>
</view>
二、设置布局到底部且不随页面滑动
<view style="position: fixed;bottom: 0rpx;width: 100%;">
<view style="background-color: #fff;padding: 25rpx;">
<view style="display: flex;flex-direction: row;">
<input type="text" placeholder="请输入评论内容" bindinput="accountInput" style="background-color: #f5f5f5;border-radius: 45rpx;padding: 15rpx;width: 75%;" />
<view style="color: #f00;font-weight: bold;width: 25%;text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center;" bind:tap="sendReview">确认发送</view>
</view>
</view>
</view>
说明:其实最主要的就是position: fixed;bottom: 0rpx;对页面的修饰;对于输入框设置一定的显示比例就可以了
三、留个脚印吧
大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;
🍅也可以关注文档末尾公众号🍅