uniapp-简单banner实现

效果：点击某一状态，会显示其下划线，表示选中状态。
代码如下：

<template><view class="p-tb-10 f-r jc-a" ><text :class="{'b-b':item.code==1}" v-for="(item,key) in status" :key='key' @click="chooseState($event,key)">{{item.value}}</text></view>
</template>
<script>export default{data(){return{status:[{cont:0,value:'全部',code:1},{cont:1,value:'待发',code:0},{cont:2,value:'已发',code:0},{cont:3,value:'已交付',code:0}]}},methods:{// 获取对象及其键值chooseState(e,index){// foreach循环清空所有的选中状态this.status.forEach(function(item,i){item.code=0})// 将当前对象的状态设为已选中this.status[index].code=1console.log(this.status[index].code)},}}
</script><style>.b-b{border-bottom: 4rpx solid #999999;}
</style>

里面主要涉及到的知识点：
vue动态修改标签的样式属性

uniapp-简单banner实现相关推荐

Uni-App 简单引导页示例
Uni-App 简单引导页示例第一步:建3个页面文件.在pages目录下,新建index/init.vue.index/guide.vue.index/home.vue pages.json: {{ ...
uniapp简单封装的激励广告和插屏广告
挺久没更新公众号了,今天给大家写一个uniapp简单封装的激励广告和插屏广告的教程,主要的解决的问题就是如果一个小程序页面多且需要调用的广告也比较多,这样会导致出现许多的重复代码,而且使得页面js文件 ...
uniapp简单搞定支付传统的开发支付需要前后端做很多工作，各种参数的处理，签名，秘钥的验证校验等，尤其是涉及到多种不同的平台支付，更是繁琐；而且以往的支付是由后端主导的，如果后端是个菜鸡，那么做这
uniapp简单搞定支付传统的开发支付需要前后端做很多工作,各种参数的处理,签名,秘钥的验证校验等,尤其是涉及到多种不同的平台支付,更是繁琐:而且以往的支付是由后端主导的,如果后端是个菜鸡,那么做这 ...
uni-app简单应用和页面跳转
uni-app简单应用和页面跳转上篇写的HBuilderX 的安装和使用 https://blog.csdn.net/YaoChiZaoFan/article/details/106538651 这 ...
HBuilderX uni-app简单实现静态登录页面（实例）
本章用到......uni-app页面跳转uni.navigateTo方法.uni.navigateBack方法.uni-app简单实现邮箱验证码发送点击后读秒样式.登录账号.密码正则表达式验证等适 ...
uniapp简单UI界面设计《登录界面粉丝列表我的好友设置页面等》（附源码）
涉及Uniapp框架结构.UI图到界面标签元素的转换过程.标签Uniapp框架配置和Uniapp常见组件使用,熟练使用Uniapp常用API和Flex布局,熟练掌握页面跳转数据传参方法以及uniapp ...
简单banner制作
简单做了一个banner,效果不是很好,主要温习了蒙版知识和滤镜的使用,其中使用(图像 > 调整 > 照片滤镜, 可以让图片融合得更协调,另外图片上添加斜线做背景,这些小技巧在做bann ...
uniapp 简单有效判断手指滑动方向
@touchstart="touchStart"@touchend="touchEnd"@touchmove='move' 首先是在uniapp中运用这三个方 ...
uniapp简单搞定支付
传统的开发支付需要前后端做很多工作,各种参数的处理,签名,秘钥的验证校验等,尤其是涉及到多种不同的平台支付,更是繁琐:而且以往的支付是由后端主导的,如果后端是个菜鸡,那么做这个支付会相当累人,所以为了 ...
笔记1：uni-app简单创建配置路径样式tabbar页面跳转
1,下载安装编辑器:https://www.dcloud.io/ 2,打开HBuilder,文件-新建-项目选择平台uni-app,填写项目名称,保存路径,选择模板,创建 3,选择平台不一样,模板选 ...

uniapp-简单banner实现

uniapp-简单banner实现

uniapp-简单banner实现相关推荐

最新文章

热门文章