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

这篇具有很好参考价值的文章主要介绍了微信小程序布局固定底部且不随页面滑动(帖子评论)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

博主介绍：本人专注于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;对页面的修饰；对于输入框设置一定的显示比例就可以了