feat: 优化处理了滚动条的问题

This commit is contained in:
2025-08-13 19:29:11 +08:00
parent 6e365fd187
commit ef8d388837
8 changed files with 587 additions and 586 deletions

View File

@@ -1,72 +1,67 @@
<template>
<view class="container">
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll">
<view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<view class="container">
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll">
<view
v-for="(item, index) in recommendTheme.recommendPostsList"
:key="index"
>
<view class="mk-card-item" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text>
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import ModuleTitle from '@/components/ModuleTitle/index.vue'
import { RECOMMEND_POSTS_TITLE } from '@/constant/constant'
import { defineProps } from 'vue'
const props = defineProps({
recommendTheme: {
type: Object,
default: {}
}
})
const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, '');
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
}
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant";
import { defineProps } from "vue";
const props = defineProps({
recommendTheme: {
type: Object,
default: {},
},
});
const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, "");
uni.$emit(RECOMMEND_POSTS_TITLE, topic);
};
</script>
<style lang="scss" scoped>
.container {
.container {
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
/* 隐藏滚动条 */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
image {
width: 188px;
height: 112px;
}
text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
}
}
}
}
image {
width: 188px;
height: 112px;
}
text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
}
}
}
}
</style>