- 博客(53)
- 收藏
- 关注
RSS订阅原创 假如后端传个0或其他数字的字段名过来前端渲染方法
var stockList = [] stockList = Object.keys(res.data.data).map(val => ({ stockId: val, stockNum: res.data.data[val] })) console.log( stockList)
2020-03-31 15:28:58
262
原创 小程序绘制环形图
<view class='cir_list'> <block wx:for='{{canvasProgressbg}}' wx:for-item='item' wx:key='{{item.index}}'> <view class='cir_list_span'> <view class='pro...
2020-03-31 10:48:19
1215
4
原创 小程序剪切板
<text class='skintext-top-middle-top-archives'>档案编号：{{archives_number}}</text> <text class='skintext-top-middle-top-copy' bindtap='danan'>点我复制</text> // 档案编号...
2020-03-31 09:24:24
292
原创 小程序实现日历展示
<view class='dataspan'> <view class='calendar_title flex_nowrap'> <view class='icon' bindtap='lastMonth'>{{" < "}}</view> <view class='yearandmonth'>{...
2020-03-30 17:21:46
839
3
原创 小程序css瀑布流布局
核心代码就是wx:if当中的wx:if="{{index%21}}“和wx:if=”{{index%20}}"html <view class="right"> <block wx:for="{{note}}" wx:for-item="item" wx:key="inedx"> <view class="item" wx:if...
2020-03-30 17:13:58
375
原创 小程序轮播图添加页码，以及封装的component轮播图
位置不要放错了在swiper-item里面<view class='rLInedx'>{{index + 1}}/{{top_banner.length}}</view>.rLInedx{ color: black; position: fixed; right: 20rpx; bottom: 20rpx; font-size: 30rpx;...
2020-03-30 16:59:55
716
原创 小程序滑动删除数据效果
<view class="container"> <view class="{{item.isTouchMove ? 'item-active' : 'item'}}" wx:for="{{list}}" wx:key='index'> <button open-type='contact' class='txt' data-index="{{index...
2020-03-30 16:45:23
266
原创 小程序wxcharts绘制曲线图
1.新建一个文件夹用来存放js,下载源码放到对应的js文件中https://sucai.suoluomei.cn/sucai_zs/file/20200330161542-wxcharts-min.jshttps://sucai.suoluomei.cn/sucai_zs/file/20200330161601-wxcharts.js页面粘贴内容 <view class...
2020-03-30 16:18:19
3639
原创 js获取手机型号
var sys; if (navigator.userAgent.match("Android")) { sys = "Android"; } else if (navigator.userAgent.match("iPhone")) { sys = "iPhone"; } else if (navigator.userAgent.match...
2020-03-26 17:13:20
862
原创 Vue脚手架html2canvas生成图片
长按识别二维码下载插件npm install --save html2canvas页面引入import html2canvas from "html2canvas"<template> <div> <div> <div class="box" ref="imageWrapper"> ...
2020-03-26 14:57:09
2010
原创 Vue剪切板功能
1.安装npm install --save vue-clipboard2在main.js中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)使用<span>{{invitationCode}}</span><img src="../../static/img/d1.png...
2020-03-25 16:04:01
120
原创 小程序渲染富文本
<rich-text class='content' nodes="{{item.content}}"></rich-text>
2020-03-24 11:30:31
239
原创 Vue中引入swiper
1.npm命令安装swipernpm install swiper --save-dev2.在需要用到swiper插件的组件中引入swiperimport Swiper from "swiper"import 'swiper/dist/css/swiper.css';3.复制html<div class="swiper-container"> <div c...
2020-03-23 16:34:29
328
原创 三元运算渲染不同颜色
<div id="Vue"> <div> <p :class="['calender',item == nowDate ? 'active' : item > nowDate ? 'disabla' : '']">123</p> </div> </div&...
2020-03-23 15:51:34
923
原创 Vue父子组件传参、兄弟组件传参
父传子parone和partwo是传给子组件页面的参数 <tabbar v-bind:parone="value1" :partwo="value2"></tabbar>import tabbar from "../components/tabbar.vue"; components: { tabbar: tabbar },...
2020-03-17 17:40:27
256
原创 小程序分享带参数
onShareAppMessage(res) { if (res.from === 'button') { //这里写右上角分享 } return { //这里写按钮分享 title: res.target.dataset.title, imageUrl: 'https://sucai.suoluomei.cn/sucai_zs/im...
2020-03-16 17:05:14
255
原创 小程序获取手机号,年月日
<view class="vie_zong"> <text class='iphone'>{{phoneNumber}}</text> <button class='getUserInfoss' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手...
2020-03-16 14:51:53
130
原创 小程序api检测是否授权
wx.getSetting({ success: (res) => { console.log(res) if (res.authSetting['scope.userInfo']) { console.log('已授权') return false; } else { ...
2020-03-16 14:44:03
746
原创 小程序上拉懒加载
data: { livehose: [],//接口数组 page: 1,//根据后端要求返回相应页数 more: false, call: 1,//接口没有数据返回就为1下次下拉不在调用接口 nolive: false, }, onLoad: function(options) { let that = this that.liv...
2020-03-16 11:42:29
331
原创 H5分享页面自定义图片标题
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>//wx.config的所有值都是后端给的 wx.config({ debug: false, appId: '{$signPackage["appId"]}', timestamp: '<?...
2020-03-14 14:11:31
748
原创 新建小程序的快速导航栏实现
"window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#ff98be", "navigationBarTitleText": "禾秘", "navigationBarTextStyle": "white" }, "tabBar": { "color"...
2020-03-14 14:00:56
102
原创 VantUI实现列表分页显示
<template><div> <van-list v-model="loading" :finished="finished" loading-text="正在加载中..." finished-text="暂无评论" @load="getsummarylist" > &l...
2020-03-14 14:00:29
2535
转载 Js微信公众号引JS-SDK调起微信支付
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>//后台返回的配置数据wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印...
2020-03-14 13:59:34
300
原创 jQ获取手机号实现倒计时
<input type="button" class="code" value="获取验证码"> $('.code').click(function () { let count = 60; const countDown = setInterval(() => { if (count == 0) { ...
2020-03-14 13:57:56
237
原创 小程序的单选按钮并拿值
事列1：<radio-group bindchange="radioChangetwo"> <label wx:for="{{title}}" wx:key="id"> <radio value="{{item.value}}" checked="{{item.checked}}"></radio> ...
2020-03-14 13:57:35
853
原创 小程序轮播图控制current来切换图片
<swiper style='height:400rpx;' circular='true' autoplay bindchange="swiperChange" interval="3000" duration="500" current="{{swiperCurrent}}"> <block wx:for="{{top_banner}}" wx:ke...
2020-03-14 10:53:56
1003
原创 小程序跳转到另一个小程序
app.json文件配置 "navigateToMiniProgramAppIdList": [ "wx6de91c88beaa27fa", ], wx.navigateToMiniProgram({ appId: 'wx6de91c88beaa27fa', path: 'pages/index/index', envVersion: ...
2020-03-12 12:00:33
256
原创 Vue脚手架PC端自适应
1.下载插件npm install px2rem-loader -Dnpm install lib-flexible -S2.在build文件夹下的utils.js文件下进行配置;具体配置如下'use strict'const path = require('path')const config = require('../config')const ExtractTextPlug...
2020-03-11 17:01:13
776
原创 Vue使用lib-flexible做手机端自适应以及引用lib-flexible导致第三方Ui库缩小
第一步 在项目中安装lib-flexiblenpm install lib-flexible --save第二步 在main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'第三步 去index.html里把meta name=“viewport标签注释掉”<!-- <meta name="viewport" conte...
2020-03-11 13:43:22
784
原创 Vue中的router的index.js目录实现懒加载
import Vue from 'vue'import Router from 'vue-router'const Index = () => import('@/views/index');const personal = () => import('@/views/personal');const whole = () => import('@/views/whole...
2020-03-11 11:19:13
2500
1
原创 Vue-Cli4搭建Vue项目，配置env开发环境、测试环境、生产环境
先下载node.js 去官网下载npm installnpm install vue-cli -g （然后输入这行）1、npm uninstall vue-cli -g （卸载）2、npm uninstall webpack (卸载webpack)3、cnpm -v4、cnpm install webpack -g() (创建项目前安装webpack)5、vue init web...
2020-03-11 10:56:33
786
原创 Vue使用weixin-js-sdk
1.导入依赖包npm i -S weixin-js-sdk2.前端页面使用import wx from 'weixin-js-sdk'export default { created() { let param = { debug: true, url: 'http://localhost:8081/productgroups', jsA...
2020-03-11 10:18:40
4197
原创 微信小程序签到
<!-- 签到 --> <view class="check"> <view class="checknumber"> <view class="number" wx:for="{{list}}" wx:key="index" data-index="{{index}}"> <image wx:if=...
2020-03-10 18:05:36
454
原创 Vue跳转带参数和取参
跳转方 gofeature(index, i) { this.$router.push({ path: "/feature", query: { course_id: 123, } }); },接收方 console.log(this.$route.query.course_id)...
2020-03-10 14:27:33
947
原创 jq循环渲染并定义data取值
var items = '' for (let i = 0; i < res.data.length; i++) { items += ` <div class="list"> <div class="prize">${res.data[i].prize_name}</div> ...
2020-03-10 13:08:35
1056
原创 vant自定义导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2...
2020-03-10 11:52:19
1782
原创 jq上拉下拉动画
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-10 11:27:35
235
原创 小程序上传图片/视频
<view class="col"> <view class="exhibit" wx:for="{{upload_list}}" wx:key='index'> <image src="{{item}}"></image> <view class="del" data-...
2020-03-10 11:25:05
549
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人