微信小程序实现滚动标签

使用scroll-view标签可实现组件滚动标签

1、list中 list.wxml代码如下:

<!--pages/list/list.wxml-->
<navigation-bartitle="小程序" back="{{false}}"color="black" background="#FFF"></navigation-bar><scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view></scroll-view>

2、list中 list.less代码实现如下:

/* pages/list/list.wxss */
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}.container1 view:nth-child(1){background-color: lightcoral;
}.container1 view:nth-child(2){background-color: lightgreen;
}.container1 view:nth-child(3){background-color:lightblue;
}.container1{border: 1px solid lightblue;width: 100px;height: 100px;
}

3、别忘记将list布局文件放置在app.json的page函数的第一项o

4、代码实现结果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/599920.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kibana管理ES生命周期

希望通过Kibana界面管理ES索引的生命周期 版本&#xff1a;7.15.2 创建索引模板 创建索引模板方便匹配索引&#xff0c;对匹配到的一批索引采用同一套生命周期管理策略&#xff0c;例如开发环境的所有索引以dev-开头&#xff0c;可以创建样式为dev-*的索引模板以匹配开发环境…

13 Python进阶:pip及其他常用模块

pip 是 Python 包管理工具&#xff0c;它提供了对 Python 包的查找、下载、安装、卸载的功能。 包地址&#xff1a; https://pypi.org/ 最新的 Python 版本已经预装了 pip。 pip 各种命令 查看是否已经安装 pip 可以使用以下命令&#xff1a; pip --version下载安装包使用…

42.基于SpringBoot + Vue实现的前后端分离-服装销售平台管理系统(项目 + 论文)

项目介绍 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的交换和信息流通显得特别重要。因此&#xff0c;开发合适的服装销售平台成为企业必然要走的一步棋。开发合适的服…

医疗器械FDA | 常见的网络安全材料发补问题都有哪些?

FDA网络安全资料发补咨询点此​​获取https://work.weixin.qq.com/ca/cawcde5ee29d239046 ————————--- 01 安全文档编写问题 FDA网络安全文档编写格式、内容、可读性等未满足官方要求&#xff0c;则将可能被要求发补整改编写后的文档。 02 安全管理问题 a. 网络安…

websocket实践

文章目录 背景WebSocket API使用场景优点 实例步骤 1: 设置 WebSocket 服务器步骤 2: 创建客户端 HTML 页面步骤 3: 测试 WebSocket 通信注意事项实际操作 参考资料 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得浏览器和服务器只需建立一个连接&#xff0c;…

怎么保证缓存与数据库的最终一致性?

目录 零.读数据的标准操作 一.Cache aside Patten--旁路模式 二.Read/Write Through Pattern--读写穿透 三.Write Back Pattern--写回 四.运用canal监听mysql的binlog实现缓存同步 零.读数据的标准操作 这里想说的是不管哪种模式读操作都是一样的&#xff0c;这是一种统一…

Linux安装最新版Docker完整教程

参考官网地址&#xff1a;Install Docker Engine on CentOS | Docker Docs 一、安装前准备工作 1.1 查看服务器系统版本以及内核版本 cat /etc/redhat-release1.2 查看服务器内核版本 uname -r这里我们使用的是CentOS 7.6 系统&#xff0c;内核版本为3.10 1.3 安装依赖包 …

每日OJ题_两个数组dp①_力扣1143. 最长公共子序列

目录 力扣1143. 最长公共子序列 解析代码 力扣1143. 最长公共子序列 1143. 最长公共子序列 难度 中等 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样…

能不能换DB吗?--抽象工厂模式

1.1 就不能不换DB吗&#xff1f; 都是换数据库惹的祸。 "我们团队前段时间用.net的C#来开发好一个项目&#xff0c;是给一家企业做的电子商务网站&#xff0c;是用SQL Server作为数据库的&#xff0c;应该说上线后除了开始有些小问题&#xff0c;基本都还可以。而后&#…

33. UE5 RPG使用增强输入激活GameplayAbility(三)

在前面的文章&#xff0c;我们实现了使用GameplayTag和InputAction的对应绑定的数据&#xff0c;并且添加到了增强输入映射的上下文中&#xff0c;实现了通过按键打印对应的GameplayTag&#xff0c;这只是我们基础需要制作的。目的主要是为了实现在GameplayAblity上面设置对应的…

Windows命令行关机操作

cmd相关备忘 1. 导语2. Windows本命操作3. 实用命令集合3.1. 一段时间后关机3.2. 立即关机命令3.3. 一段时间后重启3.4. 休眠命令3.5. 取消指令 &#x1f609; 记录一些不常用有的时候很救命的cmd命令 1. 导语 不知道小伙伴们有么有遇到过这样尴尬的时候&#xff0c;电脑的鼠标…

Vue - 你会在同一个元素上使用v-for和v-if吗

难度级别:初级及以上 提问概率:50% 在初学者看来,v-for和v-if同时使用是非常方便的,二者共同使用的常见场景有两种。例如有两个列表,分别用于渲染学生数据和老师数据,然后有两个单选按钮,用于切换当前页面中需要展示学生列表还是老师列…