起早贪黑打工人-CSDN博客

原创输入框判断昵称是否合法

verifyInput() {// 4-20个字符，可由中英文、数字、“_”、“-” var reg = /^[A-Za-z0-9-_\u4e00-\u9fa5]{4,20}$/; if (!reg.test(this.inputValue)) { uni.showToast({ title: "请输入正确格式的昵称", icon: 'none' }) } else { return true }}...

2022-04-03 14:35:10 370

原创 uniapp点击回到页面顶部

下面展示一些内联代码片。goTop(e) { // 一键回到顶部 if (uni.pageScrollTo) { uni.pageScrollTo({ scrollTop: 0 }) } else { uni.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) } },...

2022-04-03 14:31:32 1084

原创微信小程序引入vant封装tabbar

1、先创建一个custom-tab-bar文件夹，然后在微信开发者工具里面找到该文件夹，点击右键新建一个component；2、custom-tab-bar/index.wxml<van-tabbar active="{{ active }}" active-color="#DB7093" inactive-color="#DCDCDC" bind:change="onChange"> <van-tabbar-item wx:for="{{list}}" wx:key="inde

2021-07-02 21:58:36 2162 2

原创小程序开发总结，从创建开始。

注册小程序，复制appid；创建小程序项目：打开微信开发者工具，复制刚刚注册的小程序appid；安装node.js(windows系统)，安装好后即可查看node版本号(如下图)； 3.1. node.js下载路径：https://nodejs.org/en/download/安装需要的ui；4.1. 例如vant，步骤参考官方文档：https://vant-contrib.gitee.io/vant-weapp/#/quickstart；4.2. 如出现构建npm失败，报miniprogra.

2021-07-02 21:46:09 94

原创 css3、scss给图片加遮罩层

页面组件<view class="goods-content"> <image class="goods-image" src="" mode="aspectFit"></image></view>css部分<style lang="scss"> .goods-content{ .goods-image::after{ display: block; content: ''; position: absolute

2021-06-17 22:11:42 351

原创 uniapp的项目，scss和js实现跑马灯

页面组件<view class="innovate"> <view class="l"> <image class="noticeTwo" src="" mode="aspectFit"></image> </view> <view class="top" id="innovate"> <view class="con" :style="{transform:'translateX('+lampX+'px)'}"&

2021-06-17 21:41:28 2478 1

原创 uniapp实现canvas画图

画布画图片和文字//页面组件<canvas style="width:206px;height:180px;" id="canvas" canvas-id="canvas"></canvas>//js代码canvasFunction() { //画图 let goodsImg = " ";//要画的图片链接 let canvasW = 0;//宽度 let canvasH = 0;//高度 uni.getImageInfo({//获取图片高度宽度 sr

2021-06-17 21:29:15 5112 1

原创 uniapp封装了个简单的导航栏

<template> <view class="navbar"> <view class="navbar-content" :style="{background:color}"> <image v-if="!isBlack" @click="backBtn" src="https://img2.loho88.com/returnPage.png" mode="aspectFit"></image> <image v-if=

2021-06-17 21:17:21 128

原创 uniapp滚动分页

<template> <view> <view v-for="(item,index) in list" :key="index"></view> <view class="loadingText">{{loadingText}}</view> </view></template><script> export default { data() { return {

2020-11-25 10:41:11 2650

原创 uni-app引用mescroll-uni的简单示例

<template> <view> <mescroll-uni top="0" bottom="0" @down="downCallback" @up="upCallback">  </mescroll-uni> </view></template><script> import MescrollUni from "@/components/mescroll-

2020-10-28 22:14:14 2131

原创在家写了个简单的选中交互demo

最近遇到一个需求，有两个按钮，页面首次进来都是未选中状态，点击其中一个选中，点另一个也是选中，再点击同一个不选中，再点击另一个选中，再点击同一个不选中在家写了个简单的demo<template> <view> <view class="screen-box"> <view class="screen-item" @click="typeTap(0)"> <view :class="flag===true&tabIndex=

2020-10-28 21:55:14 184

起早贪黑打工人的博客