?博主介紹：本人專注于Android/java/數(shù)據(jù)庫/微信小程序技術(shù)領(lǐng)域的開發(fā)，以及有好幾年的計算機(jī)畢業(yè)設(shè)計方面的實戰(zhàn)開發(fā)經(jīng)驗和技術(shù)積累；尤其是在安卓（Android）的app的開發(fā)和微信小程序的開發(fā)，很是熟悉和了解；本人也是多年的Android開發(fā)人員；希望我發(fā)布的此篇文件可以幫助到您；

??希望此文章可以幫助到您??

微信小程序文章推薦

微信小程序布局圖片上面顯示文字

微信小程序?qū)崿F(xiàn)左邊圖片右邊文字效果

微信小程序獲取當(dāng)前日期和時間

??微信小程序繪制地圖軌跡線路

微信小程序繪制marker

微信小程序之繪制多個marker以及調(diào)用手機(jī)地圖軟件導(dǎo)航

效果顯示

說明：此頁面中，發(fā)送評論按鈕的輸入框和“確認(rèn)發(fā)送”的按鈕不會隨著頁面的滑動而滾動；就是上圖顯示的效果

一、帖子評論界面

<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>
?

這塊是設(shè)置底部的布局頁面

<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="請輸入評論內(nèi)容"?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">確認(rèn)發(fā)送</view>

????</view>

??</view>

</view>

二、設(shè)置布局到底部且不隨頁面滑動

<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="請輸入評論內(nèi)容"?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">確認(rèn)發(fā)送</view>

????</view>

??</view>

</view>

說明：其實最主要的就是position:?fixed;bottom:?0rpx;對頁面的修飾；對于輸入框設(shè)置一定的顯示比例就可以了

三、留個腳印吧

大家要是感覺此篇文章有意義；那就給個關(guān)注、點贊，收藏吧；

??也可以關(guān)注文檔末尾公眾號??文章來源地址http://www.zghlxwxcb.cn/news/detail-855566.html

到了這里，關(guān)于微信小程序布局固定底部且不隨頁面滑動(帖子評論)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！