From 3e0e40c844c3a10aca5cc0c87b18579122700b61 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 09 一月 2024 10:36:57 +0800
Subject: [PATCH] 1.新增APP升级接口对接2.列表页渲染速度优化
---
pages/mjgl/mjwj.vue | 167 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 132 insertions(+), 35 deletions(-)
diff --git a/pages/mjgl/mjwj.vue b/pages/mjgl/mjwj.vue
index c4494c6..6f8db5b 100644
--- a/pages/mjgl/mjwj.vue
+++ b/pages/mjgl/mjwj.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() {
+ //绗竴娆℃椂璋冪敤涓�涓�,涓攗ni.createSelectorQuery()闇�瑕佸湪鐢熷懡鍛ㄦ湡mounted涔嬪悗浣跨敤
+ // this.scroll()
+ },
+ computed: {
+ totalHeight() {
+ return this.allList.length * this.itemHeight * 2 //鍥犱负rpx鍜宲x鐨勫叧绯�
}
},
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锛宧eight}
+ 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: './mjwj2?code=' + this.radioValue
+ url: './mjwj2?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;
+ /*鍘熺敓涓�瀹氬緱鏈夎繖涓猳verflow鐨刪idden鏁堟灉,姝ゅ鐢ㄤ簡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;
}
--
Gitblit v1.9.3