小程序在弹出输入框的时候,如何保持头部内容不变?
发布于 5 年前 作者 juantan 4743 次浏览 来自 官方Issues

老师好:

我用小程序开发一款培训系统,用视频直播进行培训。目前程序的主体内容,在腾讯的小程序开发平台上测试跑通了。

但出现:用户提问,弹出输入框时,视频被挤出手机屏幕的现象。实际效果请看下面的图例:

图1:设计的效果图;

图2:用户弹开输入框时,上面的视频被移开;

图3:拉音的效果图。

我实际页面元素为:就是用 panel,把视频放在头部、交互区放在内容上、输入区放在尾部。

<view class="x-page" id="page" style="" data-compid="{{page.compid}}" data-pageid="{{__pageid__}}">
 
<view id="inVisibleCompContainer">
<block appPath="$UI/main" id="wxxcx_login" miniappLogin="true" mpLogin="false"/>
<block appPath="$UI/main" autoLoadUserInfo="true" autoLogin="true" id="user" useOpenid="false" useSmsService="false" data="restData" data-compid="{{user.compid}}" data-pageid="{{__pageid__}}">
</block></view>
 
<view class="x-panel   x-full  " id="panel" style="height:100%">
<view class="x-panel-top" height="210px" id="top" style="background-color:#ff9900;height:210px">
<view id="view" style="width:100%;height:autopx">
<video autoplay="{{true}}" class=" video " controls="{{true}}" id="video1"  style="width:100%;height:autopx" src="https://ycshow.oss-cn-shanghai.aliyuncs.com/%E6%88%91%E7%9A%84%E5%BD%B1%E7%89%87.mp4"></video></view></view>
<view class="x-panel-content" id="content" style="top:210px;bottom:48px">
<view id="view1" style="height:100%">
<view id="listView" style="height:100%">
<scroll-view enable-back-to-top="{{false}}" id="scrollView" scroll-with-animation="{{true}}" scroll-y="{{true}}" style="height:100%" data-compid="{{scrollView.compid}}" data-pageid="{{__pageid__}}" data-bindscrolltoupper="{{scrollView.compid}}:onUpper" data-bindscrolltolower="{{scrollView.compid}}:onLower" bindscrolltolower="dispatchBind" data-bindscroll="{{scrollView.compid}}:onScroll" bindscrolltoupper="dispatchBind" bindscroll="dispatchBind" scroll-top="{{dataScrollHeigth.current.fheight}}">
<view _created="true" autoLoadNextPage="false" autoRefresh="false" id="listLogs" label="动态列表会话内容集" wx:for-item="list1item" wx:for-index="list1index" wx:for="{{listLogs.items}}" wx:key="_key" data-index="{{list1index}}" data-idcolumn="{{list1item.fid}}" data-compid="{{listLogs.compid}}" data-pageid="{{__pageid__}}" data-capture-bindtap="{{listLogs.compid}}:onRowClick" capture-bind:tap="dispatchCaptureBind">
<view id="view7" style="display:inline-block">
<text id="textNickName" label="文本昵称" style="color:#0000FF">{{((list1item.fnickname)===null || (list1item.fnickname)===undefined || (list1item.fnickname)==='') ? '' : (list1item.fnickname)}}</text>
<text id="text3" label="文本冒号" style="color:#0000FF">{{((':')===null || (':')===undefined || (':')==='') ? '' : (':')}}</text>
<text id="textContent" label="文本内容">{{((list1item.ftext)===null || (list1item.ftext)===undefined || (list1item.ftext)==='') ? '' : (list1item.ftext)}}</text></view></view>
<view class="weui-loader-item {{scrollView.reachBottom ?'weui-loader-hide':''}}" id="loading">
<view class="ball-beat" id="view3">
<view class="weui-loader-view" id="view4"/>
<view class="weui-loader-view" id="view5"/>
<view class="weui-loader-view" id="view6"/></view></view></scroll-view></view></view></view>
<view class="x-panel-bottom" id="bottom">
<view class="x-row" id="row">
<view class="x-col x-col-80" id="colText">
<input id="inputText" placeholder="请输入您想发言的内容" style="width:100%;height:100%" value="{{dataText.current.ftext}}" type="text" data-compid="{{inputText.compid}}" bindblur="dispatchBind" data-pageid="{{__pageid__}}" bindinput="dispatchBind" data-bindblur="{{inputText.compid}}:onChange" data-bindinput="{{inputText.compid}}:onInput" disabled="{{!!(!dataText.current._userdata || dataText.current._userdata.ftext.readonly)}}"></input></view>
<view class="x-col x-col-20" id="colSend">
<button class="wx-btn" id="btnSend" size="mini" style="border-radius:5px" type="default" loading="{{btnSend.debounce}}" data-compid="{{btnSend.compid}}" data-bindtap="sendText" data-pageid="{{__pageid__}}" bindtap="debounceDispatchBind">
<icon id="icon1" size="15" type="wx-btn-icon" class=" wx-icon"/>
<view class="wx-btn-label" id="view2">{{(('发送')===null || ('发送')===undefined || ('发送')==='') ? '' : ('发送')}}</view></button></view></view></view></view><view id="__toptips__" class="wx-toptips" style="{{(!__toptips__.show) ? 'display:none!important' : ''}}"><view wx:for="{{__toptips__.msgs}}" wx:key="_key" class="wx-toptips-item {{item.typeClass}} {{item.show?'wx-toptips--show':''}}">{{item.message}}</view></view></view>

请问老师:我如何实现:弹开输入框时,视频区保留?

2 回复

哥们好!您是说 input 是有相关的属性的,是吗?

看看input的这个属性

回到顶部