Faaaaaaq的博客

原创 —————————————笔记———————————

1

原创 微信小程序下拉框选择

wxml代码<view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text></view><!-- 下拉需要显示的列表 --><view class="select_box" wx:if="{{select}}"> <view wx:for="{{grades}}" wx:key="unique"> <vi

原创 vue项目打包自动更新版本号且自动刷新缓存

vue项目打包自动更新版本号且自动刷新缓存

原创 头部div随着底部div自适应高度变化而变化

头部div随着底部div自适应高度变化而变化。

原创 微信小程序弹出层效果

【代码】微信小程序弹出层效果。

原创 微信小程序 弹出输入框

微信小程序 弹出输入框。

原创 微信小程序textArea输入框随着输入字数自适应高度

微信小程序textArea输入框随着输入字数自适应高度

原创 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

原创 Vue中使用WebSocket 心跳

Vue中使用WebSocket —— 心跳

原创 微信小程序 多选————四选二

微信小程序 多选————四选二。

原创 微信小程序手机号码简单正则

微信小程序手机号码简单正则

原创 vue+element上传图片到腾讯云

安装 cos-js-sdk-v5npm install cos-js-sdk-v5导入import Cos from "cos-js-sdk-v5";import cosKye from "@/utils/cos/key";const cos = new Cos({ SecretId: 'xxxxx-xxx', // 身份识别 ID （ 腾讯云服务器密钥 ） SecretKey: 'xxxxx-xxx', // 身份密钥}); <el-form> <el-f

原创 axios get传递数组 paramsSerializer序列化

import axios from 'axios';import qs from 'qs';　axios.create({　　baseURL: process.env.baseUrl,　　paramsSerializer: (params) => qs.stringify(params, { indices: false }),　})qs.stringify({ids: [1, 2, 3]}, { indices: false }) //形式： ids=1&ids=2&

原创 使用vue-cookies操作cookie

原创 微信小程序自定义导航栏

https://www.cnblogs.com/sese/p/9761713.html

原创 微信小程序过滤器wxs计算时间差、截取字符

先到utils里面新建一个filter.wxsfilter.wxs//faultDate开始时间 completeTime结束时间 function shijiancha (faultDate, completeTime) { var reg = getRegExp("-", "g") // 正则匹配将'-'替换为'/'。兼容iOS 不然会出现 Nan... faultDate = faultDate.replace(reg, '/') v

原创 微信小程序wx.showModal简易封装

common.js这里 titlt 和 content 是定义默认值// 方法封装 common.jsexport function showModalJudgment ({ title = "提示", content = "确认此操作吗？" } = {}, successCallback= () => {}) { return wx.showModal({ title: title, content: content, success: res => {

转载 微信小程序蓝牙文档详细解析

https://blog.csdn.net/qq_34234087/article/details/89202665

原创 微信小程序判断数组相等、重复

公共数组let oldData = [ { id: 1, price: 100, skuid: 233 }, { id: 2, price: 200, skuid: 2311 }, { id: 3, price: 300, skuid: 312 }, { id: 4, price: 180, skuid: 23342 }]let newData = [ { price: 136, skuid: 312 }, { price: 195, skuid: 233 }, { price: .

原创 微信小程序订单语音播报

**index.js**var plugin = requirePlugin("WechatSI")let manager = plugin.getRecordRecognitionManager()const app = getApp()Page({ data: { content: '您有新的订单', }, onReady: function () { this.innerAudioContext = wx.createInnerAudioContext();

原创 setTimeout定时器递归自调用

refreshPage() { this.orderQueryAll() setTimeout(() => { this.refreshPage() }, 15000); },

原创 微信小程序中通过两点经纬度计算距离

先拿到自己的经纬度 data:{ // 目的地坐标 latitude2: 22.490548, longitude2: 113.921921, } /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //获取当前位置 wx.getLocation({ type: 'gcj02', success: (res) => { console.log("当前位置：", res) const d

原创 微信小程序组件调用和传值-父子传值

components里面创建子组件transfer.wxml<view style="margin-top:30px"> 接收父组件的值：<text style="color:red">{{vals}}</text> <view style="margin-top:30px;margin-bottom:30px"> <button bindtap="father">子组件向父组件传值</button> </view

原创 微信小程序tab切换组件封装

先在components里面新建组件tabs.js代码Component({ //允许slot options: { multipleSlots: true }, /** * 组件的属性列表 */ properties: { //接收父组件传递值 tabTitle: { type: Array, value: [] } }, lifetimes: { attached: function () { //查看父组件传递的值 console

原创 微信小程序垂直列表联动分类

wxml代码<view class="search"> <input cla

原创 微信小程序传参解决乱码encodeURIComponent()

页面A传递参数var cellList = JSON.stringify(this.data.cellList) wx.navigateTo({ url: '../../pages/add/add?cellList=' + encodeURIComponent(cellList),})页面B接收 onLoad: function (e) { var itemList = decodeURIComponent(e.cellList); var list = JSON.pars

原创 微信小程序上传图片添加删除查看

wxml代码<view class="weui-uploader"> <view class="img-v weui-uploader__bd"> <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode

原创 微信小程序点击追加样式

wxml代码<view class="navtext" style="{{ index === currentInexNav ? 'color:red' : '' }}" bindtap="avtiveNav" data-index="{{ index }}" wx:for="{{ navtext }}" wx:key="index"> {{ item.name }}</view>js代码Page({ /** * 页面的初始数据 */ data:

原创 微信小程序tab切换滑动

wxml代码<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">设备故障报修</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="sw

原创 微信小程序复选框全选——取值

wxml代码<view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="checkbox" checked="{{selectilall}}" /> <text class="allSelect">全选</text> </view> <view wx:for="{{list}}"

原创 微信小程序单选框样式修改

微信小程序选择器颜色修改

原创 localStorage存储 [object,object]

存储localStorage.setItem('名称', JSON.stringify(对象数据))取值let content = JSON.parse(localStorage.getItem('名称'))

原创 微信小程序银行卡号 输入4位自动加入空格符

wxml<view> <text>银行卡号码</text> <input placeholder="输入银行卡号码" type="number" bindinput="yhkchange" value="{{yhkhdata}}"/></view>jsPage({ data: { yhkhdata:" " },yhkchange:function(e){ var yhkd=e.d

原创 css文本超出变省略号

css文本超出变省略号1.单行overflow:hidden; //超出隐藏text-overflow:ellipsis; //溢出显示用省略号white-space:nowrap; //溢出不换行2.多行overflow: hidden;//超出隐藏text-overflow: ellipsis;//溢出显示用省略号display:-webkit-box; //作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方

原创 css圆形样式

.border{width: 100px;height: 100px;border-width: 50px;border-style: solid;border-top-color: #f00;border-right-color: #f00;border-bottom-color: #00f;border-left-color: #00f;border-radius: 50%;transform: rotate(-45deg);}