前端 - 简忆博客

uniapp几个弹窗的使用方法

2021-01-12 前端

1、showToast：显示模态弹窗，类似于标准 html 的消息框：alert、confirm。主要用于消息提示框使用方法：uni.showToast({ ;;title:;'联系方式格式错误', ;;duration:;2000, ;;image:;'/static/cry.png' });参数类型必填说明平台差异说明titleString否提示的标题contentString否提示的内容showCancelBoolean否是否显示取消按钮，默认为 truecancelTextString否取消按钮的文字，默认为"取消"，最多 4 个字符cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"H5、微信小程序、百度小程序co

uniapp radio按钮组修改样式，自定义radio样式

2021-01-11 前端

10233 0

uniapp组件radio按钮官方的样式不好看，我们可以自己定义自己的样式，根据我们的主题样式来。1、页面代码：<view> ;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;课程 ;;;;;;;;;</view> ;;;;;;;;;<radio-group;:name="raido";> ;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<radio;value="语文"/><text>语文</text> ;;;;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<radio;value="数学"/><text>数学</text> ;;;;

uniapp radio-group点击获取值，判断非空方法实现

2021-01-10 前端

5961 0

获取点击后置可以使用@change：<radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}<template> <view> ;;;;;;;;<view> ;;;;;;;;;;;;<radio-group;@change="radioChange"> ;;;;;;;;;;;;;;;;<label;class="uni-list-cell;uni-list-cell-pd";v-for="(item,;index);in;items";:key="item.value"> ;;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;<radio;:value="item.value";:chec

uniapp表单数据提交及获取方法

2021-01-09 前端

7453 0

可以使用form将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。例子：<template> ;;;;<view> ;;;;;;;;<view> ;;;;;;;;;;;;<form;@submit="formSubmit";@reset="formReset"> ;;;;;;;;;;;;;;;;<view;class="uni-form-item;uni-column"> ;;;;;;;;;;;;;;;;;;;;<view>switch</view> ;;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;<switch;name="switch";/&g

uniapp重置页面滚动条方法

2021-01-08 前端

3981 1

Uniapp重置滚动条可以使用以下方法对页面距离进行重置距离uni.pageScrollTo({ ;;;;;;;;;scrollTop:;0,;//距离页面顶部的距离 ;;;;;;;;;duration:;300 });

uniapp如何锁定屏幕方向

2021-01-07 前端

5737 0

有时我们app需要禁止旋转，可以使用以下方法。打开项目根目录下的App.vue，添加如下代码即可//;#ifdef;APP-PLUS ;;;;;//;锁定屏幕方向 ;;;;;;plus.screen.lockOrientation('portrait-primary'); //;#endif参数简介"portrait-primary": 竖屏正方向；"portrait-secondary": 竖屏反方向，屏幕正方向按顺时针旋转180°；"landscape-primary": 横屏正方向，屏幕正方向按顺时针旋转90°；"landscape-secondary": 横屏方向，屏幕正方向按顺时针旋转270°；"portrait": 竖屏正方向或反

如何解决uniapp小程序下载进度条问题

2021-01-06 前端

4276 0

最新在做下载点击下载类型小程序，主要用到小程序progress滚动条，用于显示下载进度<progress;:percent="percent";show-info;:active='isDown';stroke-width="10";v-if="down==1";activeColor="#31a3fb"/>但是，博主在做小程序的时候发现滚动条一开始一直从0开始赋值，然后滚动条就一直抖动闪动。看看下载进度数据打印，也没看出什么问题。解决方法如下：进度条值默认为0，博主通过判断当前最新下载进度大于90的时候，再赋值给进度条。等于100的时候延时隐藏loading加载，再延时4s

uni-app判断是否相等。相等的话追加不同class

2021-01-05 前端

5035 0

在做uni-app项目的时候，我们有时需要判断是否相等，相等给它加上不同的class以下是个简单的例子<view;;v-for="(item);in;detail.num";@click="btnDetail(item)";;:class="[item==p?;'num_item;on':'','num_item']">{{item+1}}</view><script> ;;;;;;;;;export;default;{ ;;;;;;;;;;;;;;;;;;;data();{ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;return;{ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;p:;0 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;

uni-app跳转到详情页方法及详情页数据接收

2021-01-04 前端

6149 0

思路：给列表项加上点击方法，并且传递id参数使用路由API由uni.navigateTo,;保留当前页面，跳转到应用内的某个页面文章详情页接收id，并且传递给后端去查询改id详情数据1、保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。给列表加上点击方法，并且传递id参数 @click="play(item.id)"<template> <view> ;;;;;;;;;<view;v-for="(item);in;homeData.tv";@click="play(item.id)"> ;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<imag

解决苹果ios或安卓手机整机调试报本应用无法运行,需与Hbuilderx搭配使用问题

2021-01-03 前端

4500 0

1．在 HBuilderx 中选择可运行到手机的项目2 ．将手机连接到电脑， HBuilderx 会自动检测手机3 ．点击 HBuilderx 的菜单运行一运行到手机，会将项目部署到手机上如无法同步应用，请参考故障排查指南;问题分析首先分析下问题，博主一开始是可以调试的，后面才出现问题的，所以可以pass掉HBuilderx版本问题，其次驱动是正常连接的，所以驱动问题也可以排除。按照官方参考故障排除指南走一遍，没问题。解决方法所以解决方法很简单，就是重启手机，在停止HBuilderx调试，在点击运行到手机，完美解决。

uniapp小程序端如何实现下载视频到相册和下载图片到相册

2021-01-02 前端

5374 0

1、uniapp小程序端下载视频可以使用 uni.saveVideoToPhotosAlbum(OBJECT)，保存视频到系统相册。参数名类型必填说明filePathString是视频文件路径，可以是临时文件路径也可以是永久文件路径successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）实例：<view;class="button"> <button;type="default";@click="uploadVideo">保存到相册</button> </view>js代码<script> expo

uniapp小程序端获取用户头像，账号信息

2021-01-01 前端

4624 0

放置按钮，如果用于没有授权就显示授权按钮，否则就显示用户微信信息。<template> ;;;;;;;;<view> ;;;;;;;;<view;v-if="userInfo;!=''"> ;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;<image;:src="userInfo.avatarUrl";mode=""></image> ;;;;;;;;;;;;</view> ;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;{{userInfo.nickName}} ;;;;;;;;;;;;</view> ;;;;;;;;;;;;</view> ;;;;;;;;;;;;<view;v-else> ;;;;;;;;;;;;;;;;<button;op

uni-app如何封装请求接口数据并挂载到全局

2020-12-31 前端

4031 0

在做项目的时候，小项目可以不考虑封装，项目大的话就得考虑请求接口封装了，我们在改动的时候也方便，而且节省了很多代码。以下是一个简单的封装例子，供大家参考和使用1、;首先在更目录下新建util文件夹，在里面新建个api.js1、在api.js添加如下请求代码const;BASE_URL;=;"http://www.example.com" let;ajaxTimes=0; export;const;myRequest;=;(option)=>{ ;;;;;;;; ;;;;;;;;;ajaxTimes++; ;;;;;;;;;uni.showLoading({ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;title:;"加载中", ;;;;;;;;;;;;;;;;;;;;;;;mask:;true,

uni-app使用tabBar实现底部导航

2020-12-30 前端

3296 0

1、tabBar简介如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。2、注意事项当设置 position 为 top 时，将不会显示 icontabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。tabbar 切换第一次加载时可能渲染不及时，可以在

uniapp实现轮播图功能，实现轮播图案例

2020-12-29 前端

7238 0

uni-app轮播图主要用到swiper滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。实现案例：页面代码<template>  ;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<view;class="page-section;swiper"> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;<swiper;:indicator-dots="indicatorDots";:indicator-color="indicatorColor";:indicator-active-color="indicatorActiveC

uniapp列表数据遍历方法，实现上拉加载，下拉刷新

2020-12-28 前端

4379 0

数据列表在很多时候，经常会用到，这里介绍uniapp数据遍历方法。步骤一：首先开启上拉加载，下拉刷新打开pages.json,添加如下代码，开启enablePullDownRefresh{ "path":;"pages/index/index", style":{ "enablePullDownRefresh":;true ;;;;;;;;;} }步骤二、代码实现1、页面模板代码：遍历数据，没有数据是显示的提示内容<template>  <view> ;;;;;;;;;<view;v-for="(item);in;List";;@click="play(item.id)"> ;;;;;;;;;;;;;;;;;;;&

uniapp自定义头部任务栏，任务栏高度自适应问题

2020-12-27 前端

4410 0

非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。<template> ;;<view> ;;;;;;<view> ;;;;;;;;;; ;;;;;;</view> ;;;;;;<view>;状态栏下的文字;</view> ;;</view> </template>;;; <style> ;;.status_bar;{ ;;;;;;height:;var(--status-bar-height); ;;;;;;widt

2020-12-26 前端

4450 0

Pages 存放uniapp所有页面Static 存放静态资源，比如字体图标，图片等Unpackage 存放打包输出的文件App.vue; 项目的根组件Main.js 项目的入口文件，项目在加载首先会加载main.jsMainifest.json ;用来配置我们应用打包的东西，配置打包后配置文件Pages.json 用来设置我们整个项目的文件存放路径、外观等Uni.scss 一些常用的样式变量

解决window下HBuilderX无法运行iphone真机问题

2020-12-25 前端

3522 0

本想着用iphone真机来调试项目，结果HBuilderX一直不显示iphone，博主使用的是iTunes链接iphone的。后面网上找了很多方法，后面发现是iTunes版本问题，请下载12.9.4.102之前的版本。这里提供版本下载：iTunes64_v12.9.2.6附件下载流程：扫码关注“简忆工作室”，回复关键词“itunes”，获取下载链接成功运行。

window下uniapp如何运行iphone整机调试

2020-12-24 前端

3817 0

1、首先下载itune,进入苹果官网下载https://www.apple.com.cn/itunes/鼠标滚动到底部然后点击立即下载适用于 Windows 的最新版本。这里提供itunes百度云下载：下载方法：微信扫一扫下方二维码，关注“简忆工作室”公众号，回复itunes2、下载好之后双击文件安装。点击下一步正在安装安装结束打开软件1、用数据线把手机连接电脑，点击信任电脑，输入密码2、;;连接成功状态连接后手机端提示证书设置->通用->设备管理进入设置运行成功界面

layui如何自定义layedit富文本编辑器工具栏

2020-12-23 前端

3746 0

layui自带了layedit富文本编辑器，我们在使用过程中有时候不需要全部工具，或者想自定义工具栏，该如何弄呢？以下方法教大家自定义自己的layedit编辑器。步骤1：定义存放编辑器的盒子<div;class="layui-form-item;layui-form-text"> ;;;;;;;;;<label>小程序内容</label> ;;;;;;;;;<div> ;;;;;;;;;;;;;;;;;;;<textarea;name="min_content";class="layui-textarea;content";id="content";;style="display:none";placeholder="请输入META描述";&

uniapp几个弹窗的使用方法

uniapp radio按钮组修改样式，自定义radio样式

uniapp radio-group点击获取值，判断非空方法实现

uniapp表单数据提交及获取方法

uniapp重置页面滚动条方法

uniapp如何锁定屏幕方向

如何解决uniapp小程序下载进度条问题

uni-app判断是否相等。相等的话追加不同class

uni-app跳转到详情页方法及详情页数据接收

解决苹果ios或安卓手机整机调试报本应用无法运行,需与Hbuilderx搭配使用问题

uniapp小程序端如何实现下载视频到相册和下载图片到相册

uniapp小程序端获取用户头像，账号信息

uni-app如何封装请求接口数据并挂载到全局

uni-app使用tabBar实现底部导航

uniapp实现轮播图功能，实现轮播图案例

uniapp列表数据遍历方法，实现上拉加载，下拉刷新

uniapp自定义头部任务栏，任务栏高度自适应问题

uniapp目录介绍，目录文件详解

解决window下HBuilderX无法运行iphone真机问题

window下uniapp如何运行iphone整机调试

layui如何自定义layedit富文本编辑器工具栏

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

uniapp几个弹窗的使用方法

uniapp radio按钮组修改样式，自定义radio样式

uniapp radio-group点击获取值，判断非空方法实现

uniapp表单数据提交及获取方法

uniapp重置页面滚动条方法

uniapp如何锁定屏幕方向

如何解决uniapp小程序下载进度条问题

uni-app判断是否相等。相等的话追加不同class

uni-app跳转到详情页方法及详情页数据接收

解决苹果ios或安卓手机整机调试报本应用无法运行,需与Hbuilderx搭配使用问题

uniapp小程序端如何实现下载视频到相册和下载图片到相册

uniapp小程序端获取用户头像，账号信息

uni-app如何封装请求接口数据并挂载到全局

uni-app使用tabBar实现底部导航

uniapp实现轮播图功能，实现轮播图案例

uniapp列表数据遍历方法，实现上拉加载，下拉刷新

uniapp自定义头部任务栏，任务栏高度自适应问题

uniapp目录介绍，目录文件详解

解决window下HBuilderX无法运行iphone真机问题

window下uniapp如何运行iphone整机调试

layui如何自定义layedit富文本编辑器工具栏

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录