微信小程序布局固定底部且不随页面滑动(帖子评论)

 博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示

说明：此页面中，发送评论按钮的输入框和“确认发送”的按钮不会随着页面的滑动而滚动；就是上图显示的效果

一、帖子评论界面

<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;对页面的修饰；对于输入框设置一定的显示比例就可以了

三、留个脚印吧

大家要是感觉此篇文章有意义；那就给个关注、点赞，收藏吧；

🍅也可以关注文档末尾公众号🍅