<template>
<view class="viewport">
<!-- 推荐封面图 -->
<view class="cover">
<image :src="bannerPicture"></image>
</view>
<!-- 推荐选项 -->
<view class="tabs">
<text
v-for="(item, index) in subTypes"
:key="item.id"
class="text"
:class="{ active: index === activeIndex }"
@tap="activeIndex = index"
>
{{ item.title }}
</text>
</view>
<!-- 推荐列表 -->
<scroll-view
v-for="(item, index) in subTypes"
:key="item.id"
v-show="activeIndex === index"
scroll-y
class="scroll-view"
@scrolltolower="onScrolltolower"
>
<uni-grid :column="2" :showBorder="false" :square="false">
<uni-grid-item v-for="(goods, index2) in item.goodsItems.items" :key="goods.id">
<view class="goods">
<navigator hover-class="none" class="navigator" :url="`/pages/goods/goods?id=${goods.id}`">
<image class="thumb" :src="goods.picture"></image>
<view class="name ellipsis">{{ goods.name }}</view>
<view class="price">
<text class="symbol">¥</text>
<text class="number">{{ goods.price }}</text>
</view>
</navigator>
</view>
</uni-grid-item>
</uni-grid>
<view class="loading-text">
{{ item.finish ? '没有更多数据了~' : '正在加载...' }}
</view>
</scroll-view>
</view>
</template>
<script setup lang="ts">
import { getHotListAllAPI } from '../../services/home';
import { onLoad, onReady } from '@dcloudio/uni-app';
import { ref } from 'vue';
// 热门推荐页 标题和url
const hotMap = [
{ type: '1', title: '特惠推荐', url: '/hot/preference' },
{ type: '2', title: '爆款推荐', url: '/hot/inVogue' },
{ type: '3', title: '一站买全', url: '/hot/oneStop' },
{ type: '4', title: '新鲜好物', url: '/hot/new' },
];
// uniapp 获取页面参数
const query = defineProps<{
type: string;
}>();
// 获取当前推荐信息
const currHot = hotMap.find((v) => v.type === query.type);
// 动态设置标题
uni.setNavigationBarTitle({ title: currHot!.title });
// 推荐封面图
const bannerPicture = ref('');
// 推荐选项
const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([]);
// 高亮的下标
const activeIndex = ref(0);
// 获取热门推荐数据
const getHotRecommendData = async () => {
const res = await getHotListAllAPI(currHot!.url, {
// 技巧:环境变量,开发环境,修改初始页面方便测试分页结束
page: 1,
pageSize: 10,
});
// 保存封面
bannerPicture.value = res.data.result.bannerPicture;
// 保存列表
subTypes.value = res.data.result.subTypes;
};
// 页面加载
onReady(() => {
getHotRecommendData();
});
// 滚动触底
const onScrolltolower = async () => {
// 获取当前选项
const currsubTypes = subTypes.value[activeIndex.value];
// 分页条件
if (currsubTypes.goodsItems.page < currsubTypes.goodsItems.pages) {
// 当前页码累加
currsubTypes.goodsItems.page++;
} else {
// 标记已结束
currsubTypes.finish = true;
// 退出并轻提示
return uni.showToast({ icon: 'none', title: '没有更多数据了~' });
}
// 调用API传参
const res = await getHotListAllAPI(currHot!.url, {
subType: currsubTypes.id,
page: currsubTypes.goodsItems.page,
pageSize: currsubTypes.goodsItems.pageSize,
});
// 新的列表选项
const newsubTypes = res.data.result.subTypes[activeIndex.value];
// 数组追加
currsubTypes.goodsItems.items.push(...newsubTypes.goodsItems.items);
};
</script>
![像风一样ovo](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/002/55/78/34_avatar_mid.jpg?v=1738742138)
- 发布:2024-12-30 19:58
- 更新:2024-12-31 16:02
- 阅读:73
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 4.36
浏览器平台: Chrome
浏览器版本: Microsoft Edge 版本 126.0.2592.87 (正式版本) (64 位)
项目创建方式: HBuilderX
示例代码:
操作步骤:
首先使用v-for加载多个外层view,外层view中包裹了uni-grid(多个uni-grid独立),在外层view中添加v-show属性条件为current==index,添加一个按钮可以切换current
首先使用v-for加载多个外层view,外层view中包裹了uni-grid(多个uni-grid独立),在外层view中添加v-show属性条件为current==index,添加一个按钮可以切换current
预期结果:
多个grid显示内容相同
多个grid显示内容相同
实际结果:
一个grid能显示10条,第二个grid只能显示最后一条
一个grid能显示10条,第二个grid只能显示最后一条
像风一样ovo (作者)
基于官方hello-uni-ui修改实现,css样式可参考,项目/pages/extUI/grid/grid.vue
操作步骤:点击indexchange按钮,会切换current,但页面元素错误
2025-02-05 15:53