| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <view class="content-box">
- <uni-nav-bar fixed="true" statusBar="true" left-icon="back" @clickLeft="back">
- <view class="rx-sc" @click="openSearch">
- <uni-easyinput prefixIcon="search" style="width: 420rpx" placeholder="请输入">
- </uni-easyinput>
- </view>
- <block slot="right">
- <button @click="openSearch" class="search_btn">搜索</button>
- </block>
- </uni-nav-bar>
- <view class="list_box">
- <u-list @scrolltolower="scrolltolower">
- <view v-for="(item,index) in 100" :key='index'>
- {{item}}
- </view>
- </u-list>
- </view>
- <view class="bottom-wrapper">
- <view class="btn_box"></view>
- </view>
- <u-popup v-if='show' :show="show" mode="top" @close="close">
- <view class="search_popup">
- </view>
- </u-popup>
-
- </view>
-
-
-
- </template>
- <script>
- export default {
- data() {
- return {
- show: false,
- searchFrom: {
- keyWord: ''
- }
- }
- },
- methods: {
- openSearch() {
- this.show = true
- },
- close() {
- this.show = false
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .content-box {
- height: 100vh;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- background-color: $page-bg;
- }
- .search_btn {
- width: 120rpx;
- height: 70rpx;
- line-height: 70rpx;
- padding: 0 24rpx;
- background: $theme-color;
- font-size: 32rpx;
- color: #fff;
- margin: 0;
- }
- .list_box {
- flex: 1;
- overflow: hidden;
- padding: 4rpx 0;
- .u-list {
- height: 100% !important;
- }
- }
- .btn_box {
- width: 750rpx;
- height: 112rpx;
- background: #fff;
- }
- .search_popup {
- height: 70vh;
- }
- </style>
|