refactor(styles): replace custom scroll classes with overflow utils

Remove the deprecated scroll.scss stylesheet and its import from the main SCSS index file. Replace all usages of the custom .scroll-y and .scroll-x classes across Vue templates with the corresponding overflow utility classes. Fix a malformed scroll-view tag in the goods album page template.
This commit is contained in:
duanshuwen
2026-07-25 10:21:28 +08:00
parent 06119f00db
commit f534a2ea89
12 changed files with 11 additions and 20 deletions

View File

@@ -6,7 +6,7 @@
</view> </view>
<!-- 滚动区域 --> <!-- 滚动区域 -->
<scroll-view class="flex-1 overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId" <scroll-view class="flex-1 overflow-hidden chat-scroll" overflow-y-auto:scroll-into-view="scrollIntoViewId"
scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd"
@touchcancel="onTouchEnd"> @touchcancel="onTouchEnd">
<view class="flex flex-col pt-[12px] px-[16px] pb-[24px] gap-[10px]"> <view class="flex flex-col pt-[12px] px-[16px] pb-[24px] gap-[10px]">

View File

@@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<view class="quick-access flex flex-row ml-[12px] pt-[8px] pb-[8px] scroll-x whitespace-nowrap"> <view class="quick-access flex flex-row ml-[12px] pt-[8px] pb-[8px] overflow-x-autowhitespace-nowrap">
<view class="item rounded-[50px] flex flex-row items-center" v-for="(item, index) in itemList" :key="index" <view class="item rounded-[50px] flex flex-row items-center" v-for="(item, index) in itemList" :key="index"
@click="sendReply(item)"> @click="sendReply(item)">
<view class="flex items-center justify-center"> <view class="flex items-center justify-center">

View File

@@ -2,7 +2,7 @@
<view class="container"> <view class="container">
<ModuleTitle :title="recommendTheme.themeName" /> <ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll text-[0px] scroll-x whitespace-nowrap"> <view class="container-scroll text-[0px] overflow-x-autowhitespace-nowrap">
<view class="card-item bg-white inline-block rounded-[20px] mr-[8px]" <view class="card-item bg-white inline-block rounded-[20px] mr-[8px]"
v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)"> v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
<view class="m-[4px] relative"> <view class="m-[4px] relative">

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="recommendation-list-card w-full"> <view class="recommendation-list-card w-full">
<scroll-view class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x <scroll-view class="recommendation-list-card__scroll overflow-x-autowhitespace-nowrap w-full" scroll-x
:show-scrollbar="false" enhanced> :show-scrollbar="false" enhanced>
<view v-for="item in items" :key="item.id || item.title" <view v-for="item in items" :key="item.id || item.title"
class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden" class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden"

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="explore-cards"> <view class="explore-cards">
<scroll-view class="explore-scroll" scroll-x show-scrollbar="false"> <scroll-view class="explore-scroll" overflow-x-autoshow-scrollbar="false">
<view class="explore-track"> <view class="explore-track">
<view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card" <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
:class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80" :class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"

View File

@@ -1,5 +1,5 @@
<template> <template>
<scroll-view class="prompt-strip" scroll-x show-scrollbar="false"> <scroll-view class="prompt-strip" overflow-x-autoshow-scrollbar="false">
<view class="prompt-track"> <view class="prompt-track">
<view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card" <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card"
hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)"> hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)">

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="container pl-[12px]"> <view class="container pl-[12px]">
<view class="container-scroll text-[0px] scroll-x whitespace-nowrap"> <view class="container-scroll text-[0px] overflow-x-autowhitespace-nowrap">
<view class="card-item bg-white inline-block rounded-[20px] mr-[10px]" v-for="(item, index) in list" :key="index" <view class="card-item bg-white inline-block rounded-[20px] mr-[10px]" v-for="(item, index) in list" :key="index"
@click="sendReply(item)"> @click="sendReply(item)">

View File

@@ -4,7 +4,7 @@
<FindTabs v-if="discoveryTabs.length > 0" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" /> <FindTabs v-if="discoveryTabs.length > 0" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
</view> </view>
<scroll-view class="discovery-scroll" scroll-y @scroll="handleContentScroll"> <scroll-view class="discovery-scroll" overflow-y-auto@scroll="handleContentScroll">
<view class="discovery-body"> <view class="discovery-body">
<CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" /> <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
<ExploreCards v-if="exploreCards.length > 0" :list="exploreCards" @didSelectItem="handleCardClick" /> <ExploreCards v-if="exploreCards.length > 0" :list="exploreCards" @didSelectItem="handleCardClick" />

View File

@@ -5,7 +5,7 @@
<text class="ml-[4px] text-[18px] text-[#171717] font-[500]">全部({{ albumList.length }})</text> <text class="ml-[4px] text-[18px] text-[#171717] font-[500]">全部({{ albumList.length }})</text>
</view> </view>
<scroll-view scroll-y class="scroll-container overflow-auto"> <scroll-viewoverflow-y-autoclass="scroll-container overflow-auto">
<view class="pl-[4px] pr-[4px] pb-[24px]"> <view class="pl-[4px] pr-[4px] pb-[24px]">
<view class="grid-container"> <view class="grid-container">
<view class="album-item" v-for="(item, index) in albumList" :key="index"> <view class="album-item" v-for="(item, index) in albumList" :key="index">

View File

@@ -5,7 +5,7 @@
:backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" /> :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
<!-- 滚动区域 --> <!-- 滚动区域 -->
<scroll-view class="content-wrapper" scroll-y @scroll="handleScroll"> <scroll-view class="content-wrapper" overflow-y-auto@scroll="handleScroll">
<ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" /> <ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
<view class="goods-content"> <view class="goods-content">

View File

@@ -2,4 +2,3 @@
@import "./border.scss"; @import "./border.scss";
@import "./font-family.scss"; @import "./font-family.scss";
@import "./overflow.scss"; @import "./overflow.scss";
@import "./scroll.scss";

View File

@@ -1,8 +0,0 @@
// 滚动条
.scroll-y {
overflow-y: auto;
}
.scroll-x {
overflow-x: auto;
}