uview框架 u-index-list 组件高度自定义调整

li.zhengdao

已于 2023-11-11 03:05:00 修改

阅读量945

点赞数

文章标签：前端

于 2023-11-11 02:42:35 首次发布

本文链接：https://blog.csdn.net/qq_29714999/article/details/134343835

版权

一、当页面顶部存在其他块级元素，左侧字母导航定位后，顶首项列表被块级元素遮挡问题处理。

修改 node_modules/uview-ui/components/u-index-list/u-index-list.vue

修改后的效果图如下

二、列表最后一项内容被tabbar遮挡问题

修改 node_modules/uview-ui/components/u-index-list/u-index-list.vue

修改后的效果图如下

<template>
	<view>
		<u-sticky>
			<u-subsection @change="sectionChange" :list="list" :current="curNow" mode="button" fontSize="16" bgColor="#fff" activeColor="#0055ff" />
			<view class="search">
				<view class="right">
					<u-icon name="search" size="24px"></u-icon>
					<u-input v-model="inputValue" @confirm="changeSearch" type="text" placeholder="请输入产品关键字" clearable
						border="none" />
					<u-icon name="camera" size="24px"></u-icon>
				</view>
				<view class="left">
					<view class="left-text" @click="changeSearch">搜索</view>
				</view>
			</view>
		</u-sticky>
		<u-index-list :index-list="indexList">
			<view v-for="(item,index) in itemArr" :key="index">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]" bgColor="#f1f7ff" height="18"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell,_index) in item" :key="_index" @click="clickBrand(cell)">
						<image :src="cell.brandIconUrl" mode="aspectFill" style="width: 52px;height: 52px;"></image>
						<view class="cell-name">{{cell.subBrand}}</view>
						<view class="cell-name" style="color: #bbbbbb;">{{cell.brandNameWithEn}}</view>
					</view>
				</u-index-item>
			</view>
		</u-index-list>
	</view>
</template>