- 博客(11)
- 收藏
- 关注
原创 vue监听元素宽高变化,插件element-resize-detector
1、安装 npm install element-resize-detector2、import elementResizeDetectorMaker from ‘element-resize-detector’;var erd = elementResizeDetectorMaker(); //创建实例mounted() { //监听id为box的元素 重绘echarts erd.listenTo(document.getElementById("box"),(element)=&g
2022-04-01 15:53:37
651
1
原创 动态加载swiper,默认显示最后一个swiper-slide解决方案
用ajax动态加载swiper-slide以后,由于我是自适应屏幕的尺寸来决定一屏显示多少图片,所以加了 slidesPerView:‘auto‘这条属性,加了这条属性过后,每次刷新页面的时候他总是跑到最后一张;原因:当页面还没有接收ajax数据的时候,props的list接收的是swiperList:[]空数组,swiper的初始创建是通过空数组创建的,当ajax获取数据后,swiperList变成真正的数据项,再传给子组件时,才获取到新的数据,重新渲染新数据对应的图片,因为swiper的创建是根据
2021-07-27 15:48:58
728
原创 js数组 随机排序
// 生成1-100 的数组let list = Array.from(new Array(100), (x, y) => { return { i: y, random: Math.random() } }) // 进行随机排序 list.sort((a, b) => { return a.random - b.random })
2021-04-09 15:34:36
208
原创 js原生描点跳转+过渡效果
//获取元素距离页面顶端的距离 const offsetTop = document.querySelector(‘class’).offsetTop ; window.scrollTo({ top: offsetTop, behavior: "smooth", // 平滑滚动 不需要平滑滚动可以去掉该属性 }); // 不需要过渡效果的可以使用一下: dom.scrollIntoView();...
2021-04-09 15:23:00
287
原创 解决vue中echarts图自适应问题,设置100%宽度显示100px.
<div id="myChart"></div>data(){ myChart:null, echarts_option1:{},},methods:{ setEcharts() { let myChart = document.getElementById("myChart"); myChart.style.width = window.innerWidth - 290 + "px"; //初始化echart.
2021-02-01 14:10:11
627
原创 vue数据改变,视图不刷新
一、数组数据变动,使用某些方法操作数组,变动数据时,有些方法无法被vue监测push(),pop(),shift(),unshift(),splice(),sort(),reverse()可被vue检测到 ,filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组。 vue不能检测以下变动的数组:1> 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue2>
2021-01-15 14:09:46
184
原创 微信小程序自定义头部导航栏
1.首先 获取导航栏高度 wx.getSystemInfo({ success: (res) => { console.log(res) // statusBarHeight 手机状态栏wifi 高度 this.globalData.statusBarHeight = res.statusBarHeight; let menu = wx.getMenuButtonBoundingClientRect(); .
2021-01-11 15:32:19
100
原创 vue 路由传参
方案一:直接调用$router.push 实现携带参数的跳转this.$router.push({ path: `/describe/${id}`,})路由配置:{path: '/describe/:id',name: 'Describe',component: Describe}子组件获取参数:$route.params.id方案二:通过路由属性中的name来确定匹配的路由,通过params来传递参数this.$router.push({ name:
2021-01-11 15:25:45
103
原创 微信小程序遮罩层滚动 穿透
// 遮罩层 加入 catchtouchmove='true' <view class="mask_box" catchtouchmove='true' > <image bindlongpress="saveImg" data-path="{{posterSrc}}" class="posterSrc" src="{{posterSrc}}" alt=""/> </view>
2021-01-11 15:15:00
318
原创 wxml-to-canvas 传参
wxml-to-canvasapp.jsconst { wxml, style } = require("./wxml_canvas.js");Page({data: { wxml: { text: "", }, src:null }, onLoad() { this.widget = this.selectComponent(".widget"); this.renderToCanvas(); }, renderToCan
2021-01-11 15:10:01
650
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人