uni-app 开发卡片横向滚轮

最新推荐文章于 2024-06-04 22:15:00 发布
最新推荐文章于 2024-06-04 22:15:00 发布
阅读量332 收藏 2
点赞数
分类专栏： 历史杂文
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwt4007253/article/details/118444479
版权
本文介绍了在uni-app开发中遇到的横向滚轮卡片展示问题及解决方法，重点在于如何调整CSS内置样式以实现预期效果。
摘要由CSDN通过智能技术生成

在开发过程中经常会碰到如下的横向滚轮来展现多数据卡片的情况，但是根据uni官网给的示例发现一直无法实现，后来发现是css的内置样式需要调整。

在这里插入图片描述
html

<scroll-view class="tabScroll" scroll-x="true" >
	<view  class="tabScroll_item" v-for=
最低0.47元/天 解锁文章
StephenEvan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app实现卡片切换效果
qq_45018844的博客
12-14 2927
切换主题+css样式第一步：先看效果第二步：卡片的切换第三步：切换卡片内部的样式 第一步：先看效果 第二步：卡片的切换 <view class='bgDemo'> <view v-for="item,index in objectMultiArray" :key="index" @click='bindMultiPickerChange2' :data-id="index" style='z-index:50;'> <image :src="ite
uniapp银行卡卡片
qq_37967380的博客
09-27 1713
组件bank-item.vue <template> <view class="bank-item" :style="bankThem"> <!-- #ifndef MP-WEIXIN --> <canvas v-if="showCanvas" class="bank-icon" :id="uuid" :canvas-id="uuid" /> <!-- #endif --> <!-- #ifdef MP-WEIXIN --&
uniapp小程序开发 | 从零实现一款影视类app （横向滚动和下拉刷新的实现）
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
06-04 2570
uniapp小程序开发实战系列，完整介绍从零实现一款影视类小程序。包含小程序前端和后台接口的全部完整实现。这里介绍下我的电影小程序的完整实现过程，作为笔记存档。该篇介绍下实现过程中遇到的横向滚动和下拉刷新的实现。电影展示界面，是个明显的横向滚动。在没实现之前，一直以为可能需要借助listView或者uni-grid组件来实现，最后发现都不行。最终仅使用内置组件的scroll-view配合flex布局就完美达到效果啦。这里总结分享下，给需要的小伙伴。
wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片
狼性书生
02-20 617
采用uniapp-vue3实现，透明辉光动画卡片，卡片内容包含标签、标题、副标题、图片； 支持H5、微信小程序（其他小程序未测试过，可自行尝试）
uni-app轮播图组件实现手势滑动
江黎
06-20 703
定义swiper-list组件, 两个页面, 一个是swiper-list, 一个是swiper-list-item <template> <swiper class="swiper-list" @change="change" :current='tabIndex'> <swiper-item class="swiper-list-item" v-for="(item,index) in tabLsit" :key="index"> <sw..
uni-app卡片组件
江黎
06-20 3320
<template> <view> <!-- 基础卡片(左边是图片,右边是文字) --> <view v-if="mode==='base'" class="cardlist"> <view class="cardlist-image"> <image src="../../static/logo.png" mode="widthFix"></image> </view> ...
uni-app开发介绍PPT
08-12
"uni-app开发介绍" uni-app是一款使用Vue.js开发所有前端应用的框架，开发者可以编写一套代码，并将其发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快...
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
uni-app实战在线教育类app开发-视频教程网盘链接提取码下载.txt
11-07
本季度基于uni-app实战开发在线教育类app和小程序，课程包括：图文，音频，视频，电子书、会员、直播、问答、考试、拼团秒杀、优惠券。一次开发，同时搞定Android、iOS、微信小程序、H5端。非常适合具有...
uni-app优医问诊-配套资料
05-04
uni-app是一个多端开发框架，它允许开发者使用Vue.js语法编写一次代码，就可以在iOS、Android、H5、小程序等多个平台上运行，极大地提高了开发效率。 该配套资料可能包括了以下关键知识点： 1. **uni-app基础**：...
uniapp实现可以左右滑动导航栏
01-18
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下 <vi
文字列表无缝向上滚动
12-09
文字列表无缝向上滚动,只要设定总体高度，多少行都能让文字滚动。
uniapp实现可滑动选项卡
01-18
本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下 tabControl-tag.vue <view class=tabList :style=isEquall
uni-app实现一个循环卡片效果
祈澈菇凉
12-26 7424
ColorUI-UniApp是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库，项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。 1:从github上下载 https://github.com/weilanwl/ColorUI image 2：将ColorUI-UniApp里面的文件...
uniapp——使用colorUI、自定义顶部导航栏、漂亮的卡片时间列表（包括微信小程序时间列表）
wy313622821的博客
12-17 7026
简介：使用colorUI实现如下的效果： 1、导入colorUI 一、下载colorUI源码解压，复制根目录的 /colorui 文件夹到你的根目录 二、App.vue 引入关键Css main.css icon.css <style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的项目css */ .... </style> 三、p
uni-app 页面样式
qq_57263284的博客
06-14 1901
uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个
uni-app学习笔记五（第5章项目实战：选项卡切换，主页卡片视图制作，基础卡片视图制作）
学习笔记
12-29 707
选项卡切换 首先增加click，传入点击的项目和index。 下面的method中对应添加clickTab。 然后增加动态绑定class,这里注意动态绑定class只能绑定一个。写法是 :class. <template> <view class="tab"> <scroll-view class="tab-scroll" scroll-x> <view class="tab-scroll_box"> <view v-for="
【uni-app】银行卡卡包页面
just a moment
03-13 2554
银行卡卡包页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值