当前位置:   article > 正文

uniapp获取键盘高度顶起底部输入框

uniapp获取键盘高度

核心代码:

  1. uni.onKeyboardHeightChange((res) => {
  2. console.log(res.height);
  3. //转化为rpx
  4. this.KeyHight = res.height;
  5. });

全部代码:

  1. <template>
  2. <view class="pagesone" :class="'bg-'+themeColor.name" style="padding-top: 100rpx;">
  3. <view class="searchdemo" :style="{bottom:KeyHight?KeyHight+'px':KeyHight}" style="display: flex;flex-direction: row;">
  4. <view class="input" :class="'input-'+themeColor.name">
  5. <view class="icon">
  6. <image class="icon-child" :src="'/static/search-'+themeColor.name+'.png'" />
  7. </view>
  8. <input :adjust-position="false" :always-system="true" :value="searchContent" confirm-type="search" @confirm="search" @input="onInputSearch"
  9. :class="'text-'+themeColor.name" class="input-text" placeholder="输入股票名称/缩写/代码"
  10. placeholder-class="placeholder-class" :focus="true"></input>
  11. <view class="icon" v-show="this.searchContent!=''" @click="clearSearch()">
  12. <image class="icon-child" :src="'/static/delete.png'" />
  13. </view>
  14. </view>
  15. <text :class="'text-'+themeColor.name" @click="back"
  16. style="font-size: 32rpx;margin-top: 15rpx;margin-left: 20rpx;">取消</text>
  17. </view>
  18. <!-- <view style="margin-top: 30rpx; display: flex;flex-direction: row;justify-content: center;">
  19. <text :class="'text-'+themeColor.name" style="font-size: 28rpx;" v-show="tab == 1"
  20. @click="ChangeTab(1)">股票</text>
  21. <text style="font-size: 28rpx;color: #6F6F6F;" v-show="tab != 1" @click="ChangeTab(1)">股票</text>
  22. <text :class="'text-'+themeColor.name" style="font-size: 28rpx;margin-left: 130rpx;margin-right: 130rpx;"
  23. v-show="tab == 2" @click="ChangeTab(2)">概念</text>
  24. <text style="font-size: 28rpx;color: #6F6F6F;margin-left: 130rpx;margin-right: 130rpx;" v-show="tab != 2"
  25. @click="ChangeTab(2)">概念</text>
  26. <text :class="'text-'+themeColor.name" style="font-size: 28rpx;" v-show="tab == 3"
  27. @click="ChangeTab(3)">资讯</text>
  28. <text style="font-size: 28rpx;color: #6F6F6F;" v-show="tab != 3" @click="ChangeTab(3)">资讯</text>
  29. </view> -->
  30. <view class="blist" :style="{bottom:KeyHight?KeyHight+40+'px':'80rpx'}" style="padding-top: 30rpx;" v-show="tab == 1">
  31. <block v-for="(item, index) in gpList.slice().reverse()" :key="index">
  32. <u-GPList :item="item"></u-GPList>
  33. </block>
  34. </view>
  35. <view :class="'bg-'+themeColor.name" style='position: fixed;width:100%;height: 100%;z-index: 0;'>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import uGPList from './search-main-gupiao-list.vue';
  41. export default {
  42. components: {
  43. uGPList,
  44. },
  45. data() {
  46. return {
  47. tab: 1,
  48. searchContent: "",
  49. gpList: [],
  50. KeyHight: 0,
  51. }
  52. },
  53. onLoad(option) {
  54. this.$statusColor.modification();
  55. uni.onKeyboardHeightChange((res) => {
  56. console.log(res.height);
  57. //转化为rpx
  58. this.KeyHight = res.height;
  59. });
  60. },
  61. methods: {
  62. back() {
  63. uni.navigateBack({
  64. });
  65. },
  66. clearSearch() {
  67. this.searchContent = "";
  68. },
  69. ChangeTab(tab) {
  70. this.tab = tab;
  71. },
  72. /* 键盘上完成(回车)的事件 */
  73. search() {
  74. if (this.isBlank(this.searchContent)) {
  75. this.$toast("输入股票代码/首字母");
  76. return;
  77. }
  78. if (this.tab == 1) {
  79. this.search_index(this.searchContent);
  80. } else if (this.tab == 2) {
  81. } else if (this.tab == 3) {
  82. }
  83. },
  84. onInputSearch: function(e) {
  85. if (this.tab == 1) {
  86. this.searchContent = e.detail.value;
  87. if (this.searchContent != "") {
  88. this.search_index(this.searchContent);
  89. }
  90. } else if (this.tab == 2) {
  91. } else if (this.tab == 3) {
  92. }
  93. },
  94. search_index(word) {
  95. var _this = this;
  96. this.request({
  97. urlInfo: this.$REQUEST.SEARCH_INDEX,
  98. body: {
  99. word: word,
  100. showtype: 'app',
  101. },
  102. success(res) {
  103. console.log("search_index==", res)
  104. },
  105. fail: (res) => {
  106. console.log("search_index==", res)
  107. var newList = [];
  108. res.data.data.filter((item, i) => {
  109. var obj = {};
  110. var sList = item.split(" ")
  111. obj.code = sList[0];
  112. obj.name = sList[1];
  113. obj.sx = sList[2];
  114. obj.foxxcode = sList[3];
  115. newList[i] = obj;
  116. return item >= res.data.data.length
  117. })
  118. _this.gpList = newList;
  119. }
  120. })
  121. },
  122. },
  123. }
  124. </script>
  125. <style lang="scss">
  126. .pagesone{
  127. width: 100%;
  128. height: 100%;
  129. }
  130. .searchdemo{
  131. //触底
  132. width: 100vw;
  133. position: absolute;
  134. bottom: 0;
  135. z-index: 99;
  136. //被键盘顶起
  137. }
  138. .blist{
  139. width: 100vw;
  140. position: absolute;
  141. bottom: 80rpx;
  142. z-index: 99;
  143. }
  144. .icon {
  145. .icon-child {
  146. width: 40rpx;
  147. height: 40rpx;
  148. margin-top: 10rpx;
  149. }
  150. }
  151. .input {
  152. margin-left: 30rpx;
  153. width: 75%;
  154. height: 76rpx;
  155. display: flex;
  156. flex-direction: row;
  157. align-items: center;
  158. border-radius: 10rpx;
  159. padding-left: 20rpx;
  160. padding-right: 20rpx;
  161. }
  162. .input-text {
  163. margin-left: 20rpx;
  164. margin-right: 20rpx;
  165. width: 100%;
  166. font-size: 32rpx;
  167. }
  168. .placeholder-class {
  169. color: #6F6F6F;
  170. font-size: 32rpx;
  171. }
  172. </style>

此方法适配ios和安卓

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/514624
推荐阅读
相关标签
  

闽ICP备14008679号