莫成尘的博客

单选您将看到以下效果 思路是给要设置的元素绑定一个值，并判断这个值是不是和我们赋予（传参）的值相同（使用uview组件 您可以尝试换成class等）<template> <view> <u-button @click="setClass(1)" :type="setClassIndex==1?'primary':'default'">设置1</u-button> <u-button @click="setClass(2)" :typ

复制代码您将看到和一下截图一样的效果。我们将适配全屏至正常h5下的所以页面大小，您再此处将依然使用rpx作为开发单位。<template> <view class='pageBox'> <view class="wrap"> name </view> </view></template><script> export default { data() { return{ tit

先看代码，复制使用即可。您将看到以下效果：注意：icon图标需要自行下载并替换，此外调用我本地的地图密钥可能有上线次数，请使用调试不要超过50次！<template> <view class="box"> <map name="" :markers="markers"></map> </view></template><script> export default { data() { ret

先看代码，复制使用即可。（防抖一般用于按钮使用，避免如登陆，购买等多次调用，如多次点击购买按钮在网速较慢下可能生成多个订单信息等）这里只是一个封装调用的简单流程，如您使用我们官方产品 uview， 防抖参考: throttle & debounce节流防抖.您需要先定义一个js文件 复制以下代码//防抖原理：一定时间内，只有最后一次操作，再过times毫秒后才执行函数let timeout = null; // 执行函数 时间 是否立即执行function debo

先看代码，复制使用即可。（uni内置方法uni.getNetworkType用来获取网络状态，uni.getSystemInfo用来获取手机系统）<template> <view> <view @click="getNetworkType">点击获取状态</view> <view> 网络状态为：{{TypeOfNow}} </view> </view></template><s

在uniapp中，有一些原生的小技巧处理交互，简单分享两个，一个是点击图片查看大图，可保存等，一个是调用外部地图。如您满意请给莫成尘点个star 话不多说，直接上代码点击查看大图（代码均复制粘贴即可使用）<template> <view class="Box-Wrap"> <view class="IStitles"> <view class="toptitle Names">客服二维码</view> <view cl

let IsReg = new RegExp('<img', 'gi');

有时候我们发现，在uniapp中使用vantweapp的时候，vant官方的案例并不能帮助我们在uniapp中使用vant。如您满意请给莫成尘点个star（以下链接点击下载即可）项目链接: https://gitee.com/Filialpiety/uniapp-and-vantweapp.您将看到以下页面，下载压缩包本地解压即可使用。具体使用方式和vant一样。vantweapp官网链接: https://youzan.github.io/vant-weapp/#/button. 附加和可能出现

先看代码，您将看到以下效果，复制使用即可，一下代码均可复制粘贴使用。如您满意请给莫成尘点个Fabulous如果同步存储不到接口数据可以尝试使用异步 // 异步存储和读取 //设置 存储内容 参数为参数名，参数值 uni.setStorageSync('name',"莫成尘"); //也可以这样写 uni.setStorageSync('name',this.name); //输出 仅仅使用参数名即可获取 console.log(uni.getStorageS

您直接复制粘贴即可使用不需要做特殊的处理。如您满意请给莫成尘点个Fabulous1： 纯文字提示框uni.showToast({ title: '只有文字弹窗', icon: 'none', //如果要纯文本，不要icon，将值设为'none' duration: 2000 //持续时间为 2秒}) 2： 带有成功图标提示框uni.showToast({ title: '成功提示弹窗', icon: 'success', //将值设置为 success 或者 ''

先看代码，您将看到以下的效果，图片来源于网络Uview框架，这意味着您直接复制粘贴即可使用不需要做特殊的处理，当然，如果下半部分的商品介绍信息不符合您的UI 我已提供了可以更改的大盒子，他自己没有高度，您可随意自定义。如您满意请给莫成尘点个Fabulous<template> <view class="Index"> <!-- 瀑布流布局列表 --> <view class="pubuBox"> <view class="pubuI

先看代码，复制使用即可，不过还是建议您一边阅读，一遍整理思路，总的来说，思路很重要，其次才是代码。您将看到以下效果<template> <view> 发表时间 <span style="color:red">{{outTime}}</span> 是现在的 <span style="color:red">{{nowTimer | formatDate}}</span> </view></template&

先看代码，复制使用即可，当然，可能并不是通用的，建议您一边阅读，一遍整理思路，总的来说，思路很重要，其次才是代码。（在此之前，您首先要确定的是您的小程序主体是商户才可以发动微信支付）<script> //就一般思路而言 您首先将要做的是 根据商品订单或者其他信息创建一个订单 // 比如创建订单接口({activity_id:_this.activity_id}) // 然后调用你们后台的支付接口等待返回数据 如下 export default { name: 'p

先看代码，复制使用即可，这是一个uniaap和vue版本的行为验证，不同的区别是他们将使用不同的包，包文件我已放在本人文件下载资源中，您将看到以下效果（请看完gif图，中间有过度时间有些长）。感谢captcha 团队的开源支持 附送连接，您对滑块验证有后端，html端，weex，reactnative，android，ios等多端的需求请访问 https://mirror.anji-plus.com/captcha-web/#/第一步 下载本人提供的压缩包 解压之后放进项目任意位置，你可以将其视为组件

先看代码，复制使用即可，验证基于购物商城类可能会用到的正则验证而来。（个人习惯用驼峰命名，请见谅）手机号验证思路是以1开头的第二位是23456789，匹配数字字符9位并结束共计11位function PhoneNum(value) { return /^1[23456789]\d{9}$/.test(value);}固定电话号验证思路是以1开头的第二位是23456789，匹配数字字符9位并结束共计11位function FixedPhoneNum(value) { return /^\d

先看代码，复制使用即可，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）您将看到以下效果。<template> <view class="box"> <input type="text" @input="GetValue" class="S-input" :placeholder="placeholder" @focus="ShowValue"> <!-- 判断input获取焦点同时后台给到了数据 -->

市场上的小程序UI框架有很多，都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的，接下来给您推荐uView（不仅仅是UI库也是一个js库）（uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。）uView官网连接，点击跳转.安装教程最后一步完成时需要重新编译

先看代码，复制使用即可，这是纵向滑动屏幕导航栏跟随滑动的效果，是一个最基础的判断滚动距离和元素距离顶部高度的方式构成的，您将看到以下效果。以下是代码 复制粘贴即可 ， 这是一个非常基础的原理，我并未进行封装或更高深的写法，为了方便您理解（尤其是作为新手，主要给您提供思路），同时并未借助框架或别的，拿来即用。部分思路我将放在注释中。<template> <view class="ComBox"> <view class="box"> 站位 </v

先看代码，复制使用即可，我已帮您考虑到使用v-for循环或者其他可能带来的问题,包含了下拉加载更多以及跳转详情页的参数传递。（这里推荐您安装插件使用scss）您需要新建页面，点击复制即可看到效果，效果如下：<template> <view class="ComBox"> <div class="ComList" v-for="item in ComListSon" :key="item.id" @click="ToDel(item.id)"> <

先看代码，复制使用即可，下文中您即将找到一些您很非常常用的界面样式，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）（其他诸如UI框架涵盖的内容，样式效果这里将不再赘述，下面我将会整理一个目录供您快速浏览使用）九宫格布局// tetemplate<view class="Grid"> <view class="Grid-Item" v-for="item in List" :key="item.id"> <view c

先看代码，复制使用即可，本文介绍了如何在uniapp中使用vant组件实现省市区联动选择，在复制使用之前您要先配置使用以下两个vantweapp组件"van-action-sheet": "路径/dist/action-sheet/index","van-area": "路径/dist/area/index",然后在下载本人提供的资源ThisIsarea.js。（如果您未找到本人提供的ThisIsarea.js资源，您可以去以下地址下载 https://github.com/youzan/vant

先看代码，复制使用即可，一共三个步骤，具体使用方式下文将清楚罗列，任何新手都可以轻松了解和使用。同时您将为此省下很多宝贵时间。下面是请求的封装,您需要在根目录下新建Get.js文件，然后复制以下代码即可。// 注释将会特别详细，只有您有合理地耐心看完将不会出现问题function request(url, data) { return new Promise((resolve) => { wx.request({ method: 'POST', url: url, dat