随笔分类 - uniapp
学习uniapp知识，掌握更好的一门技术
摘要：
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。当 ref 和 v-for 一起用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
阅读全文
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。当 ref 和 v-for 一起用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
阅读全文
摘要：
key key的特殊属性主要用在Vue的虚拟Dom算法中，在新旧nodes（元素节点）对比时辨识VNodes key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用
阅读全文
key key的特殊属性主要用在Vue的虚拟Dom算法中，在新旧nodes（元素节点）对比时辨识VNodes key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用
阅读全文
摘要：
1、wx:setStorage() （uniapp写法，uni.setStorage） 将数据存储在本地缓存中指定的key中，它会覆盖掉原来该key 对应的内容。 数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理。 否则数据一直可用。 单个 key允许存储的最大数据长度为1
阅读全文
1、wx:setStorage() （uniapp写法，uni.setStorage） 将数据存储在本地缓存中指定的key中，它会覆盖掉原来该key 对应的内容。 数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理。 否则数据一直可用。 单个 key允许存储的最大数据长度为1
阅读全文
摘要：
一般用于左右滑动或上下滑动，比如banner轮播图。 参照例子： <swiper class="search-swiper" :disable-touch="true" :circular="true" vertical="false" :autoplay="true" :interval="500
阅读全文
一般用于左右滑动或上下滑动，比如banner轮播图。 参照例子： <swiper class="search-swiper" :disable-touch="true" :circular="true" vertical="false" :autoplay="true" :interval="500
阅读全文
摘要：
ThorUI的dataTime日期时间选择器，是日期时间选择器picker-view扩展，日期时间选择器。 具体组件代码参考：https://www.bookstack.cn/read/ThorUI-1.42/166755 props: "type" : 1-日期+时间（年月日+时分） 2-日期(年
阅读全文
ThorUI的dataTime日期时间选择器，是日期时间选择器picker-view扩展，日期时间选择器。 具体组件代码参考：https://www.bookstack.cn/read/ThorUI-1.42/166755 props: "type" : 1-日期+时间（年月日+时分） 2-日期(年
阅读全文
摘要：
方法一、uniapp的 cover-view 和 cover-image 用法 为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。 cover-im
阅读全文
方法一、uniapp的 cover-view 和 cover-image 用法 为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。 cover-im
阅读全文
摘要：
使用video组件： <template> <div class='home'> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOpti
阅读全文
使用video组件： <template> <div class='home'> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOpti
阅读全文
摘要：
input type 有效值 值 说明 平台差异说明 text 文本输入键盘 number 数字输入键盘 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。 idcard 身份证输入键盘 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
阅读全文
input type 有效值 值 说明 平台差异说明 text 文本输入键盘 number 数字输入键盘 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。 idcard 身份证输入键盘 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
阅读全文
摘要：
发现问题：输入一些文字后对比，textarea组件在苹果IOS和安卓手机中输入内容后的样式 发现不同：textarea组件在安卓和苹果手机中输入内容后的局部特写 虽然在安卓手机上padding的值可以正常设置，但为了跟苹果手机一致，可以设置最小值为10rpx。那这样就有了新的问题，由于ios端本身最
阅读全文
发现问题：输入一些文字后对比，textarea组件在苹果IOS和安卓手机中输入内容后的样式 发现不同：textarea组件在安卓和苹果手机中输入内容后的局部特写 虽然在安卓手机上padding的值可以正常设置，但为了跟苹果手机一致，可以设置最小值为10rpx。那这样就有了新的问题，由于ios端本身最
阅读全文
摘要：
方法一： image + show-menu-by-longpress image组件 + show-menu-by-longpress属性 ，image图片组件用法这也是最简单的一种，不用写js就能实现功能。代码如下： 方法二：wx.previewImage 这次需要使用微信官方提供的wx.pre
阅读全文
方法一： image + show-menu-by-longpress image组件 + show-menu-by-longpress属性 ，image图片组件用法这也是最简单的一种，不用写js就能实现功能。代码如下： 方法二：wx.previewImage 这次需要使用微信官方提供的wx.pre
阅读全文
摘要：
示例：iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。 一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。 幸运的是，在小程序上我们只需要
阅读全文
示例：iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。 一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。 幸运的是，在小程序上我们只需要
阅读全文
摘要：
1. v-show和v-if指令的共同点和不同点？答: 共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且
阅读全文
1. v-show和v-if指令的共同点和不同点？答: 共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且
阅读全文
摘要：
uniapp 用uni.makePhoneCall( )拨打电话 点击查看代码 <template> <view class="content"> <view @click="call_phone(tel)">拨打电话</view> </view> </template> <script> expo
阅读全文
uniapp 用uni.makePhoneCall( )拨打电话 点击查看代码 <template> <view class="content"> <view @click="call_phone(tel)">拨打电话</view> </view> </template> <script> expo
阅读全文
摘要：
uniapp 飞入购物车的商品的小组件，获取购物车的具体位置X轴Y轴，再获取商品图片，进行飞入。 点击查看代码 <template> <view class="container" style="height: 0rpx;"> <!-- 加入购物车的小球 --> <view class="good_
阅读全文
uniapp 飞入购物车的商品的小组件，获取购物车的具体位置X轴Y轴，再获取商品图片，进行飞入。 点击查看代码 <template> <view class="container" style="height: 0rpx;"> <!-- 加入购物车的小球 --> <view class="good_
阅读全文
摘要：
globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等，如图只截取了一部分内容。 在pages.json中 效果如下： 注意：pages下的 navigationBarTitleText 页面级会覆盖globalStyle下的navigationBarTitleText 全局级 详情
阅读全文
globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等，如图只截取了一部分内容。 在pages.json中 效果如下： 注意：pages下的 navigationBarTitleText 页面级会覆盖globalStyle下的navigationBarTitleText 全局级 详情
阅读全文
摘要：
只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 easycom是在pages.json中配置 就是自动找在components目录下，符合命名规范的组件 在页面引用如下所示 详情请看这里unia
阅读全文
只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 easycom是在pages.json中配置 就是自动找在components目录下，符合命名规范的组件 在页面引用如下所示 详情请看这里unia
阅读全文
摘要：
uniapp TAB切换组件 点击查看代码 /** * 组件名称：TAB切换组件 */ <template> <view class="tab-list" :class="tabStyle ? 'tab-list-text' : ''"> <view :class="active == index
阅读全文
uniapp TAB切换组件 点击查看代码 /** * 组件名称：TAB切换组件 */ <template> <view class="tab-list" :class="tabStyle ? 'tab-list-text' : ''"> <view :class="active == index
阅读全文
摘要：
uniapp 弹框小组件，支持H5、APP、微信小程序 点击查看代码 /** * 名称：弹窗组件 */ <template> <!-- #ifdef H5 || APP-PLUS --> <view class="uni-popup" :class="position" @touchmove.pre
阅读全文
uniapp 弹框小组件，支持H5、APP、微信小程序 点击查看代码 /** * 名称：弹窗组件 */ <template> <!-- #ifdef H5 || APP-PLUS --> <view class="uni-popup" :class="position" @touchmove.pre
阅读全文
摘要：
日常用到的小组件，分享一个，简单又便捷 点击查看代码 /** * 名称：返回顶部 */ <template> <view :class="top_flag == true ? 'gotop' : 'gotop hide'" @tap="toTop"> <i class="iconfont">
阅读全文
日常用到的小组件，分享一个，简单又便捷 点击查看代码 /** * 名称：返回顶部 */ <template> <view :class="top_flag == true ? 'gotop' : 'gotop hide'" @tap="toTop"> <i class="iconfont">
阅读全文
摘要：
和手机连接之后，还是不能真机调试，如下图 现在开始进行设置，安卓手机 第一步：电脑与手机用数据线连接起来，会弹出如下图，点击“传输文件” 第二步：去手机设置->"系统"->"关于手机"点击版本号7次，之后返回“系统”，就会出现“开发人员选项”如下图 首次调试的时候，点了7次版本号之后就会出现这一项，
阅读全文
和手机连接之后，还是不能真机调试，如下图 现在开始进行设置，安卓手机 第一步：电脑与手机用数据线连接起来，会弹出如下图，点击“传输文件” 第二步：去手机设置->"系统"->"关于手机"点击版本号7次，之后返回“系统”，就会出现“开发人员选项”如下图 首次调试的时候，点了7次版本号之后就会出现这一项，
阅读全文
浙公网安备 33010602011771号