uniapp tab选项卡简单demon
时间:2021-06-12
本文章向大家介绍uniapp tab选项卡简单demon,主要包括uniapp tab选项卡简单demon使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<template> <view class="content"> <view class="title-bar"> <view :class="selIndex==n?'selIndex':''" v-for="(i,n) in titleList" @click="selIndexs(n)" :key="n">{{ i }} </view> </view> <view class="tab"> <scroll-view class="tab-scroll-view" :scroll-left="scrollLeft" scroll-with-animation :scroll-x="true"> <view class="tab-item" v-for="(item, index) in titleList" :key="index" @touchstart="start" @touchmove="move" @touchend="end"> {{item}} </view> </scroll-view> </view> </view> </template> <script> export default { data() { return { scrollLeft: 0, selIndex: 0, titleList: ['待付款', '待收货', '已收货', '待评价', '售后'], winWidth: 0, startX: 0, moveX: 0 } }, onLoad() { this.getSysInfo() }, methods: { getSysInfo () { let that = this uni.getSystemInfo({ complete(res) { that.winWidth = res.windowWidth console.log(that.winWidth) } }) }, selIndexs (n) { this.selIndex = n this.scrollLeft = n*this.winWidth }, start (e) { this.startX = e.touches[0].clientX }, move (e) { this.moveX = e.touches[0].clientX }, end (e) { e.preventDefault(); if (this.moveX - this.startX < 0) { if (this.titleList.length*this.winWidth>this.scrollLeft) { this.scrollLeft += this.winWidth if ((this.titleList.length-1) > this.selIndex) { this.selIndex +=1 } } } else { if (this.scrollLeft == 0) { this.scrollLeft = 0 this.selIndex = 0 } else { this.scrollLeft -= this.winWidth this.selIndex -= 1 } } console.log(this.scrollLeft) console.log(this.selIndex) } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .title-bar { width: 100%; height: 40px; font-size: 15px; display: flex; align-items: center; justify-content: space-around; } .selIndex { color: red; } .tab-scroll-view { width: 750rpx; height: 100vh; flex-direction: row; white-space: nowrap; } .tab-item { display: inline-block; width: 100vw; height: 100%; font-size: 16px; color: #555; border: 1px solid yellow; transition: all .5 ease-in-out; } </style>
原文地址:https://www.cnblogs.com/Strangers/p/14878686.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Syncthing自建私有同步盘
- 05.视频播放器内核切换封装
- sklearn做特征选择
- ResilioSync:公私兼备的同步盘
- 面向对象语言的三大特征: 封装 继承 多态(二)——继承
- 教你如何设置宝塔面板 Brotli压缩
- Message: session not created: This version of ChromeDriver only supports Chrome version 83
- 宝塔BT面板 设置开启TLSV1.3
- 02 复杂度分析_pythoner学习数据结构与算法系列
- 修改Mysql数据库的数据存储位置
- 使用Caddy搭建TLS1.3+HTTP2代理
- 一文带你了解Python爬虫(一)——基本原理介绍
- 关于修改window.navigator.webdriver代码失效问题
- 一文带你了解Python爬虫(二)——四种常见基础爬虫方法介绍
- 当 snapshot 失败时发生了什么