1.新增APP升级接口对接2.列表页渲染速度优化

loulijun2021

2024-01-09 3e0e40c844c3a10aca5cc0c87b18579122700b61

 pages/mjgl/wxsq.vue

@@ -3,46 +3,67 @@
      <page-nav title="模具维修申请"></page-nav>


      <view v-if="purchorderArrAll.length>0">
      <!-- <view v-if="purchorderArrAll.length>0"> -->


         <u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="扫描模具编码/输入模具信息"
            clearable border="surround" @clear='inputBoxValueClear' v-model="inputBoxValue"
            @change="changeInputBoxValue">
            <template slot="suffix">
               <u-icon name="scan" color="#909399" size="24" @click="topScanClick"></u-icon>
            </template>
         </u-input>
      <u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="扫描模具编码/输入模具信息"
         clearable border="surround" @clear='inputBoxValueClear' v-model="inputBoxValue"
         @change="changeInputBoxValue">
         <template slot="suffix">
            <u-icon name="scan" color="#909399" size="24" @click="topScanClick"></u-icon>
         </template>
      </u-input>



         <u-alert :title="'模具数（共'+title+'个）'" type="primary"></u-alert>
      <u-alert :title="'模具数（共'+title+'个）'" type="primary"></u-alert>

         <u-radio-group v-model="radioValue" iconPlacement="right" @change="radioValueClick" class="radioGroupClass">
            <view v-for="(item,index) in purchorderArr" :key="item.code">
               <!-- @click="radioValueClick(item.code)" -->
               <view>
                  <u-radio activeColor="red" size="18" labelSize='16' :name='item.code'
                     :label="item.code+' ' + item.name +' '+item.spec "></u-radio>


      <scroll-view class="container" scroll-y="true" @scroll="scroll">
         <!-- 虚拟列表总高度 -->
         <view :style="{'height': `${totalHeight}rpx`, 'position': 'relative'}">
            <!-- 可视渲染区 -->
            <view :style="{'top': `${top}px`}" style="width: 100%;position:absolute">
               <!--在这里自定义你数据的展示结构和样式,itemHeight为这里的总高度-->

               <view class="radioGroupClass">
                  <view v-for="(item,index) in purchorderArr" :key="item.code" class="item">
                     <view @click="highlightClick(item.code)" :style="{color:selectedCode===item.code?'#fff':'#000',
                              background:selectedCode===item.code?'#3c9cff':'#fff'
                        }">

                        <view style="display: flex;">
                           <view style="width:60rpx;text-align: center;margin-right: 20rpx;">{{item.code}}
                           </view>
                           <view style="">{{item.name}}</view>
                           <view style="margin-left: 20rpx;">{{item.spec}}</view>

                        </view>

                     </view>
                  </view>
               </view>
               <u-line v-if="index!==purchorderArr.length-1" color="#2979ff"></u-line>


            </view>
         </u-radio-group>

         <!-- <view style="height: 120rpx;"></view> -->

         <view class="footer" style="min-height:62rpx;">
            <u-button type="primary" size='large' :hairline="true" @click="navigateTo" text="下一步"></u-button>
         </view>
      </scroll-view>



      <view class="footer" style="min-height:62rpx;">
         <u-button type="primary" size='large' :hairline="true" @click="navigateTo" text="下一步"></u-button>
      </view>
      <!-- </view> -->


      <view v-if="purchorderArrAll.length===0">
      <!--    <view v-if="purchorderArrAll.length===0">
         <div class="sacnBody">
            <div class="boxImg"></div>
            <div class="scanText">暂无模具信息</div>
         </div>
      </view>
      </view> -->

   </view>
</template>
@@ -54,7 +75,6 @@
      ScanMouldQrCodeMessageSubData
   } from '../../config/api.js';
   export default {
      onLoad(option) {},

      onPullDownRefresh() {
         setTimeout(() => {
@@ -71,12 +91,32 @@

            title: 0,


            radioValue: '',

            purchorderArr: [],

            purchorderArrAll: []
            purchorderArrAll: [],

            allList: [], //原始数据列表
            //虚拟列表
            showList: [], //可视区域显示的数据
            itemHeight: 100, //每条数据所占高度
            showNum: 0, //可视区域显示的最大条数
            top: 0, //偏移量
            scrollTop: 0, //卷起的高度
            startIndex: 0, //可视区域第一条数据的索引
            endIndex: 0, //可视区域最后一条数据的索引+1，

            selectedCode: ''

         }
      },

      onShow() {
         //第一次时调用一下,且uni.createSelectorQuery()需要在生命周期mounted之后使用
         // this.scroll()
      },
      computed: {
         totalHeight() {
            return this.allList.length * this.itemHeight * 2 //因为rpx和px的关系
         }
      },
      created() {
@@ -88,6 +128,49 @@
         this.getScanMouldQrCodeMessageData()
      },
      methods: {

         //虚拟列表
         getShowList() {
            //可视区域能出现的数据条数
            this.showNum = Math.ceil(this.contentHeight / this.itemHeight);
            // console.log('可视数量', this.showNum)

            //可视区域第一条数据的索引
            this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
            // console.log('初始索引',this.startIndex)

            //可视区域最后一条数据的下一条数据
            this.endIndex = this.startIndex + this.showNum;

            //可视区数据，会比实际可视多渲染一条		
            this.showList = this.allList.slice(this.startIndex, this.endIndex)
            // console.log(this.showList)

            //保证滑动时第一条数据完整展示
            let offsetY = this.scrollTop - (this.scrollTop % this.itemHeight);

            this.top = offsetY;
         },
         scroll() {
            // 利用uniapp提供的接口获取可视区域的高度和滚动高度
            let query = uni.createSelectorQuery()
            let container = query.select('.container');
            container.fields({
               // rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
               size: true, //是否返回节点尺寸信息{width，height}
               scrollOffset: true //是否返回节点滚动信息{scrollLeft,scrollTop}
            }, (res) => {
               // console.log(res)
               this.scrollTop = res.scrollTop
               this.contentHeight = res.height
               this.getShowList(); //因为所在函数是异步
            }).exec()
         },
         highlightClick(code) {
            this.selectedCode = code
         },


         init() {
            uni.stopPullDownRefresh();
         },
@@ -126,18 +209,16 @@
            this.purchorderArr = this.purchorderArrAll.filter((p) => {
               return p.code.indexOf(val) !== -1 || p.name.indexOf(val) !== -1 || p.spec.indexOf(val) !== -1
            })
            this.radioValue = this.purchorderArr[0].code
            this.selectedCode = this.purchorderArr[0].code
            this.$forceUpdate()
         },
         inputBoxValueClear() {
            this.inputBoxValue = ''
         },
         radioValueClick(val) {
            this.radioValue = val
         },

         navigateTo() {
            uni.navigateTo({
               url: './wxsq2?code=' + this.radioValue
               url: './wxsq2?code=' + this.selectedCode
            });
         },
         async getScanMouldQrCodeMessageData() {
@@ -149,7 +230,7 @@

            this.title = res.data.length

            this.radioValue = res.data[0].code
            this.selectedCode = res.data[0].code

         }
      }
@@ -159,6 +240,22 @@
<style lang="scss" scoped>
   @import url('@/style/global.css');

   .container {
      width: 100%;
      height: 70vh;
      /*原生一定得有这个overflow的hidden效果,此处用了scroll-view所以不需要*/
      /*overflow:auto;*/
   }

   .item {
      /* 按照实际需求写css */
      width: 100%;
      height: 200rpx;
      line-height: 90rpx;
      /* 要对应上itemHeight */
      border: 1px solid #c8c8c8;
   }

   ::v-deep .uicon-arrow-left>span {
      display: block;
   }