uni-app
三十公子七
这个作者很懒,什么都没留下…
展开
-
【uni-app 仿淘宝做的地区选择器】
uni-app 仿淘宝做的地区选择器(没写完,但是能用)<template> <view> 高级选择器 <picker mode="multiSelector" @columnchange="uChange" :value="index" :range="array2"> <view class="uni-input">{{array2[0][index[0]]}}...{{array2[1][index[1]]}}...{{array2[2原创 2020-08-03 18:04:22 · 1701 阅读 · 0 评论 -
【uni-app 时间选择器,任意选择器】
uni-app 时间选择器,任意选择器因为是原生的,所以挺好理解1.一个简单的选择器是这么写的可以用来选择优先级<template> <view> 选择器: <picker @change="Change" :value="index" :range="array"> <view class="uni-input">{{array[index]}} </view> </picker> </v原创 2020-07-31 17:03:57 · 2118 阅读 · 2 评论 -
【uni-app 左边文字右边图片(图标),还有底部边框线(布局)】
uni-app 左边文字右边布局,还有底部边框线(布局)1.布局里的样式都在这里:博主的基本样式其他如果不是特别的样式就是写在标签里,一般不多,i开头的样式只是为了让自己知道这是一整块的,可复制可循环的。如果是特殊的样式还是得好好命名在css里写的<view class="imo rel fle_ali pad_l25 bot_eee" style="height: 100rpx;"> <view class="" > <text>更多</原创 2020-07-31 16:02:10 · 6444 阅读 · 0 评论 -
【uni-app 怎么设置一个全局变量,在每个页面都能用】
uni-app 怎么设置一个全局变量,在每个页面都能用1.把变量放在一个存储器里uni.setStorageSync(‘name’, ‘张三’);uni.setStorageSync(‘age’, ‘12岁’);uni.setStorageSync(‘person’, {name:‘张三’,age:‘12岁’});2.使用存储器的这个变量uni.getStorageSync(‘name’)var age = uni.getStorageSync(‘age’)console.log(ag原创 2020-07-31 11:51:37 · 2734 阅读 · 0 评论 -
【uni-app 获取比当前时间多一个月(时间戳),不溢出】
uni-app 获取比当前时间多一个月(时间戳)1.在pages里新建文件夹common,common里新建.js文件命名method.js如何获取当前时间1.定义一个当前时间,一个存放一个月后时间时间多一个月需要注意的是,当前月份去下个月份,时间以当月时间为准,注意当月如果比下个多一天一月判断下一个月的天数需要考虑闰年和平年的天数,最后一天是28还是29,二月需要判断当月时间当前时间的时间戳 + 这个月的天数×24小时×60分钟×60秒×1000毫秒<template>原创 2020-07-30 16:57:16 · 1509 阅读 · 2 评论 -
【uni-app 获取比当前时间少一个月(时间戳),不溢出】
1.在pages里新建文件夹common,common里新建.js文件命名method.js如何获取当前时间1.定义一个当前时间,一个存放一个月前时间时间少一个月需要注意的是,当前月份倒流回上个月份,倒流时间已上个有多少天为准三月判断上一个月的天数需要考虑闰年和平年的天数当前时间的时间戳 - 上个月的天数×24小时×60分钟×60秒×1000毫秒<template> <view style="margin: 50rpx;"> <text>一个月原创 2020-07-30 15:45:44 · 1108 阅读 · 0 评论 -
【uni-app 获取比当前时间少一个小时或者少一个月,多一个月(时间戳)】
uni-app 获取比当前时间少一个小时或者少一个月,多一个月(时间戳)这里举个少一个小时为例子1.在pages里新建文件夹common,common里新建.js文件命名method.js这里结合导出方法一起用,如果单纯在页面用方法的话,复制代码进自定义方法里即可function hour(e){ // 判断是少一个小时还是多一个小时 if(e < 0){ e = e * (-1) hourDown(e) return } return hourUp(e)}原创 2020-07-30 14:27:12 · 1981 阅读 · 0 评论 -
【博主个人在uni-app里使用的基本标签样式】
博主个人在uni-app里使用的标签样式这些样式我都是放在pages的新建目录common,新建.css文件命名为base.css文件里的,引用是在app.vue里写上 @import “./pages/common/base.css”; 就可以在每个页面用了 /* 7.30遮幕 按钮*/ .zhemu{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 98; back原创 2020-07-30 14:25:16 · 1859 阅读 · 0 评论 -
【uni-app 如何禁止页面滚动】
uni-app 如何禁止页面滚动在需要在禁止页面滚动的标签上加上catchtouchmove=“true”HBuilder X和微信小程序上鼠标可以滚动,手机真机测试的时候就不会动了···例子<template> <view> <view class="zhemu" catchtouchmove="true"> </view> <view class="gun"> 滚动区域 </view>原创 2020-07-30 10:21:59 · 14420 阅读 · 7 评论 -
【uni-app 怎么获取当前时间,获取年月日,获取星期,解决小程序在苹果手机少了八个小时】
uni-app 怎么获取时间,获取年月日,获取星期1.在pages里新建文件夹common,common里新建.js文件命名method.js这里结合导出方法一起用,如果单纯在页面用方法的话,复制代码进自定义方法里即可function yearTime(e){ var a = new Date(); var y=a.getFullYear(); var m=a.getMonth()+1; m = m<10? "0"+m:m; var d=a.getDate(); d = d<1原创 2020-07-29 16:38:15 · 5161 阅读 · 1 评论 -
【uni-app 怎么写伪类,怎么在伪类中使用icon字体图标】
uni-app 怎么写伪类,怎么在伪类中使用icon字体图标1.问题描述,为什么要写伪类大家是否在写代码中经常遇到这样的事情,如果写一个价格标签¥2.50,符号要小写,价格要变颜色,那你的第一想法是不是写两个标签和两个样式分开放?那写伪类相对于就方便很多,只需要写一个标签一个类名,就能相当于三个标签使用2.怎么写伪类先给需要写伪类的标签一个相对定位,然后通过::before或者::after在标签的前面或者后面添加伪类,一个标签一个类完成了两件事<template> <vi原创 2020-07-29 11:17:56 · 2198 阅读 · 0 评论 -
【uni-app 怎么设置背景色渐变,两边浅中间深一点的颜色】
uni-app 怎么设置背景色渐变,两边浅中间深一点的颜色1.效果图2.代码,可以调角度,颜色开始位置,颜色结束位置角度为零是从上往下渐变,角度为90则是从左往右渐变,角度270则是从右往左渐变<template> <view> <view class="dd"> </view> </view></template><style> .dd{ width: 100%; heigh原创 2020-07-29 10:45:58 · 8580 阅读 · 0 评论 -
【uni-app 如果{{data}}里的数据为空,则显示标签里另一个默认数据】
uni-app 如果标签里拿到的数据{{data}}为空,则显示标签里另一个默认数据1.标签里拿数据不需要引号,但如果是字符串就需要引号‘’<template> <view> <text>{{dd.year|| '2020/08'}} </text> </view></template>2.初始化后台数据<script> export default { data() { return原创 2020-07-29 10:18:27 · 1995 阅读 · 0 评论 -
【uni-app 怎么获取input里的数据,怎么修改input的placeholder样式】
uni-app 怎么获取input里的数据,怎么修改input的placeholder样式1.写两个input标签,获取值变化,提示信息,提示样式<template> <view> <comeBack text_name="日记本"></comeBack> <view class="input " > <input type="text" @blur="title" placeholder="日记标题" placeh原创 2020-07-28 18:00:56 · 1571 阅读 · 0 评论 -
【uni-app 自定义底部导航可页面跳转】
uni-app 自定义底部可页面跳转1.写好模板放数据内容,这个自定义底部我是按照组件格式去写的,如何写组件和使用组件<template> <view> <view class="bot_nav" style="position: relative;"> </view> <view class="bot_nav " style="position: fixed;"> <view class="fle1 fle_all原创 2020-07-28 10:14:34 · 2457 阅读 · 3 评论 -
【uni-app scroll-view怎么去除滚动条】
uni-app scroll-view怎么去除滚动条博主在写导航时发现了scroll-view的一些小坑,比如(1)scroll-view里view里写不了弹性布局,居中需要用text-align: center;height: 100rpx;line-height: 100rpx;(2)滚动条一直去不掉我在网上找了很多去除滚动条的方法,都是说这样写即可::-webkit-scrollbar{ display:none;}我在页面的style里写了没有效果,后面放到app.vue的全局样式里才行原创 2020-07-27 10:45:28 · 4934 阅读 · 3 评论 -
【uni-app 一个能自动播放,有指示点的轮播图怎么写】
uni-app 轮播图怎么写轮播图在uni里有自己的标签,改里面的属性跟改自己写的组件属性一样。如何写组件链接一个写好的轮播图效果图如下,这个轮播图有指示点,能自动播放·要了解轮播图的属性可以点击此链接去官方文档查看详情,我修改的属性依次是是否有指示点,指示点颜色,选中指示点的颜色,是否自动播放,自动播放毫秒数,切换时间<template> <view> <swiper class="swiper" :indicator-dots='true'原创 2020-07-24 17:48:46 · 2017 阅读 · 0 评论 -
【uni-app 怎么自定义顶部导航和底部导航,弹性布局增加数据自适应(简易)】
uni-app 怎么自定义顶部导航和底部导航,弹性布局增加数据自适应,简单易懂底部效果:1.首先弄点底部的原始数据,比如首页、个人中心等文字,默认图标,点击后的图标#### 2.写标签和样式主要样式还有一些基本的样式/* 图片 /image{width: 100%;height: 100%;}/ 弹性布局 /.fle{display: flex;}.fle_all{display: flex;align-items: center;justify-content: c原创 2020-07-23 11:44:32 · 1893 阅读 · 3 评论 -
【uni-app 怎么写组件,怎么全局引用组件,引用组件时怎么改变组件里的文字】
uni-app怎么写组件这里给大家写一个返回上一页的组件1.右击项目新建一个目录components,新建一个组件,命名,勾选创建同名目录2.写标签和样式,字体图标不会写的小朋友可以去这里看( https://blog.csdn.net/TChildeSeven/article/details/107492005 ),如果不需要字体图标换别的标签也是可以的一个好的组件的样式是可以在引用的时候做修改的,第三点会说明这些参数,都是一一对应的3.组件默认值,正常情况下,标签里写样式是小驼峰命名:样原创 2020-07-22 17:35:08 · 1914 阅读 · 1 评论 -
【uni-app怎么导出方法,引用方法,使用导出的方法,导出方法的格式怎么写】
uni-app怎么导出方法,引用方法,使用导出的方法,导出方法的格式怎么写1.首先右击项目新建一个目录commen(命名随便),右击commen文件夹新建一个.js文件,命名methods.css(命名随便)2.这里导出一个返回上一个页面的方法3.在pages里的页面里引用和使用,用点击方法即可,这里结合一下icon图标的使用icon图标的使用方法:https://blog.csdn.net/TChildeSeven/article/details/107492005使用导出的方法步骤十分简原创 2020-07-22 10:22:08 · 1390 阅读 · 2 评论 -
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont看了好几篇使用说明和官方说明总结出来的用法1.首先右击项目新建一个目录iconfont(命名随便),右击iconfont文件夹选6.css文件,命名icon.css2.打开网页搜索iconfont,选择搜索想要的图标,把看中心意的小图标放入购物车里,然后点击右上角的购物车,新建一个文件夹存放这次收藏的图标点击生成将生成的代码复制好,页面也别关,后面还需要复制图标下的代码3.将复制的代码粘贴到icon.css文件里4.在App.vu原创 2020-07-21 16:44:24 · 2650 阅读 · 1 评论 -
【uni-app添加购物车的红色小球动画,仿美团】
添加购物车的红色小球动画,仿美团 NO.3此博客中引用的插件来源于uni-app官网的插件市场,cartsBall,插件里具体方法和参数在这里就不说明了。这里只是总结使用这个插件的方法由于做购物车的添加是需要循环遍历的,但是这个插件用在遍历里会有问题,这是第一个遇到的问题第二个问题是添加的点击事件和小球的点击事件冒泡冲突了,两个点击事件合并一起就没什么问题了上图上部分代码(顺便提一下这个加号使用伪类做的,当然减号也是)<template> <view> <vi原创 2020-07-20 14:34:40 · 2940 阅读 · 0 评论 -
【uni-app 实现左侧点击右侧滚动,仿美团菜单滚动】
uni-app实现仿美团菜单,点击左侧菜单,右侧跳到与左侧相对应的位置(NO.1)默认是推荐,如果点妙蛙种子,右侧就自动滑动到id相应的地方点击点菜评价的切换在NO.21.template <view> <view class="plan4 fle" v-if="p3_cur==0"> <view class="plan5 fle1"> <scroll-view scroll-y="true" class="fon_6 " :style="原创 2020-07-16 10:22:12 · 4920 阅读 · 10 评论 -
【uni点击导航切换内容,简单版(仅适用于内容固定而且很少的情况下使用)】
uni-app实现仿美团菜单,点击导航切换内容(NO.2)仅适用于内容固定而且很少的情况下使用,导航因为内容少,样式是自己写的,不是滚动型,文字底部高亮是伪类,跟随文字位置点击菜单滚动相应内容在NO.11.template,这里只放切换的代码 <view> <view class="plan1 fle bor_bot"> <view class="item fle_all " v-for="(item,index) in menu_name" :class="原创 2020-07-16 10:40:47 · 957 阅读 · 0 评论