![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uniapp
uniapp介绍例子
babyxuqian
安得广厦千万间,大庇天下寒士俱欢颜!风雨不动安如山。呜呼!何时眼前突兀见此屋,吾庐独破受冻死亦足!
展开
-
uniapp,vue中的身份证格式校验
uniapp,vue中的身份证格式校验原创 2022-08-12 09:31:56 · 2134 阅读 · 1 评论 -
uniapp中用地址或者文字生成二维码
uniapp中用地址或者文字生成二维码原创 2022-07-11 17:24:06 · 836 阅读 · 1 评论 -
uniApp中图片文件上传插件(uniFilePicker)
uniApp中图片文件上传插件(uniFilePicker)原创 2022-06-21 10:57:50 · 4873 阅读 · 0 评论 -
uniapp中导航栏的配置
tabBar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。在pages.json文件中{ "pages": [ //pages数组中第一项表示应用启动页,参考:ht原创 2021-11-03 11:29:34 · 2637 阅读 · 0 评论 -
uniapp横向滚动(scroll-view)
属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时(单位px),触发原创 2021-10-19 15:41:26 · 9927 阅读 · 1 评论 -
uniapp轮播图(swiper)
属性名 类型 默认值 说明 平台差异说明 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 indicator-active-color Color #000000 当前选中的指示点颜色 active-class String swiper-item 可原创 2021-10-19 15:56:03 · 6850 阅读 · 0 评论 -
flex弹性布局简单布局例子
效果图<template> <view class="content"> <view class="dataInfo"> <view class="dataList" v-for="(item,index) in list" :key='index'> <image :src="item.url" mode="heightFix"></image> <text>{{item.title.原创 2021-11-03 11:05:16 · 258 阅读 · 0 评论 -
uniapp跳转,传值,弹框显示,picker选择器
在首页中传list数组对象 JSON.stringify(object); 转String<script> export default { data() { return { list:[{name:'张三',id:1},{name:'李四',id:2},{name:'zyy',id:3}] } }, }</script>uni.navigateTo({ //跳转页面把item传过去 url: `/pages/details/....原创 2021-10-19 16:53:19 · 2386 阅读 · 0 评论 -
Uniapp中分页触底加载的实现方式
JavaScript部分<script> import { indexBaseSstaffinfoList } from '@/utils/api.js' //调用api请求接口 export default { data() { return { nurseList:null, //数据 total: null, //总条数 data: { pageNum: 1, //页数原创 2021-08-05 10:16:48 · 5813 阅读 · 4 评论 -
uniapp中使用定位导航和拨打电话
uni.getLocation(OBJECT)获取当前的地理位置、速度。OBJECT 参数说明参数名 类型 必填 说明 平台差异说明 type String 否 默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于uni.openLocation和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。 altitude Boolean 否 传入 true 会返回高度..原创 2021-12-15 14:38:30 · 1337 阅读 · 0 评论 -
uniapp中如何获取当前位置并计算出某个地点距离
uni.getLocation(OBJECT)获取当前的地理位置、速度。1.首先在uniapp中的manifest.json配置文件开启获取位置权限来获取当前位置2.代码块部分原创 2021-12-10 11:26:00 · 4792 阅读 · 1 评论 -
uniapp中文本内容超出规定行数后展开收起的处理
效果图:话不多说直接上代码<template> <view class="intro"> <view class="introText"> <span v-if="introduce" ref="text" @click="clickTotal"> {{introduce}} </span> <span v-if='exchangeButton' @click="clickTotal"&g..原创 2021-11-10 17:33:28 · 4823 阅读 · 2 评论 -
uniapp(vue)中动态添加绑定style + class
一、style样式动态设置1.普通对象动态添加(比较常见)<view :style="{color:fontColor}"> </view><view :style="{ paddingTop: num + 'px' }"></view><view :style="{backgroundImage: 'url(' + imageURL + ')','background-repeat':'no-repeat', b.原创 2021-11-22 11:58:24 · 5935 阅读 · 1 评论 -
uniapp中的购物车全选多选实例( checkbox )
checkbox-group多项选择器,内部由多个 checkbox 组成。属性说明属性名 类型 默认值 说明 @change EventHandle <checkbox-group>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]} checkbox多选项目。属性说属性名 类型 默认值 说明 value String原创 2021-11-04 15:22:43 · 4183 阅读 · 1 评论 -
uniapp中的单选实例( radio)
radio-groupsd单项选择器,内部由多个<radio>组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。属性说明属性名 类型 默认值 说明 @change EventHandle <radio-group>中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value} radio单选项目。属性说明属......原创 2021-11-04 15:34:19 · 9338 阅读 · 3 评论 -
uniapp文本框,地区选择器,性别选择,实例
原代码块(html,css,js)注意:(后续要有用city.vue和data.js)在下面<template> <view class="conten"> <view class="hand"> <view class="list"> <span>姓名:</span> <input type="text" placeholder='请输入姓名' v-model="cityForm.nam..原创 2021-11-04 16:31:53 · 5692 阅读 · 7 评论 -
uniapp中文本框只能为输入数字和输入值的大小范围
<template> <view> <input type="text" placeholder="请输入款号" placeholder-style='color:#808080' v-model="cargoNo" @input='inputClick'> </view></template><script> export default { data() { return { cargoNo: .原创 2022-01-24 10:59:57 · 8239 阅读 · 0 评论 -
uniapp动态获取dom高度信息和小程序右上角胶囊(悬浮球)信息
<template> <view class="main"> <view class="hander"> </view> </view></template><script> export default { data() { return { } }, created() { //获取页面所有信息 uni.getSystemInfo({ success:.原创 2021-12-29 17:31:04 · 1633 阅读 · 0 评论 -
uniapp中滚动到一定高度时菜单导航吸顶(导航栏滚动到顶部后固定)
onPageScroll(监听滚动、滚动监听、滚动事件)参数说明:属性 类型 说明 scrollTop Number 页面在垂直方向已滚动的距离(单位px) 代码块部分<template> <view class="main"> <view class="hand" ref='handHeight'> <!-- 内容块 --> </view> <view class="nav"..原创 2021-11-12 16:29:42 · 4179 阅读 · 2 评论 -
uniapp中三种tab切换实战案例
<template> <view class="content"> <view class="hand"> <view class="nav"> <text v-for="(item,index) in dataList" :key='index' :class="index == n?'on':''" @click="n=index">{{item.commodity_title}}</text> .原创 2021-11-03 14:27:07 · 1385 阅读 · 0 评论 -
uniapp中(swiper)和(scroll-view)+(uni-popup)合并使用
效果图代码块<template> <view class="hand"> <scroll-view class="scroll-view" scroll-x="true"> <view class="scollInfo"> <view class="dataList" v-for="(item,index) in scolList" :key='item.characterId'> <image..原创 2021-11-11 17:49:22 · 1311 阅读 · 0 评论