vue项目经验

1.mescroll 使用

1.引入

import MescrollUni from "mescroll-uni/mescroll-uni.vue";

import MescrollMixin from "mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本

2.包裹

<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >

组件

</mescroll-uni>

3.初始化，定义

export default {

mixins: [MescrollMixin],

components: {

MescrollUni

},

data() {

return {

downOption: {

auto:false

},

upOption: {

auto:false ,//初始化时进行一次回调，即列表数据不用加入初始化中， page:{

num:0,

size:3,

},

}

}}，

methods：{

downCallback(page){

setTimeout(()=>{

this.currentPage=1

this.goodList=[]

this.mescroll.resetUpScroll(); //重置

},1000)

// setTimeout(()=>{

// console.log(666);

// // 隐藏下拉加载状态

// this.mescroll.endErr()

// },1000)

},

upCallback(page){

数据请求

List=list.concat(list1) //数据拼接

Page+=1

this.mescroll.endBySize(curLength,total) //成功状态隐藏加载

}

}

2.echart图表自适应

（属性详解：Echarts所有属性设置_echarts textstyle-CSDN博客）

<div ref=”homeChart” id=’chart’></div> //挂载

import * as echarts from 'echarts'

Vue2

// 监听窗口，重构图表

mounted () {

window.onresize = () => {

console.log('是否变化')

this.initEcharts()

}},

vue3

onMounted(() => {

initChart()

// 监听重构图表

window.οnresize=()=> {

initChart()

}

});

let homeChart=ref(null) //vue3定义挂载点（dom）

function initChart () { //初始化图表

let newPromise = new Promise((resolve) => { //*异步加载

resolve()

})

newPromise.then(() => {

const myChart = echarts.init(homeChart.value)

let yList=props.deptList.map(item=>{return item.text}).toReversed() //数据变化

(let myChart=echarts.init(document.getElementById('chart'))) //vue2 挂载方式

window.addEventListener('resize', function () { //视图监听重构

myChart.resize()

})

myChart.setOption({ //配置项

grid: { //网格距离

// x:70,

// y: 0,

// x2: 10,

// y2: 22,

top: '0',

left: '17%',

right:'3%',

bottom:'10%',

// containLabel: true, //防止坐标轴标签溢出（包含文字内容）

},

xAxis: [

{

type: 'value', 类型

min: 0,

max: 800,

interval: 100, //步进

axisLabel: {//坐标轴刻度标签的相关设置。

color: '#bfc7c9',

fontSize: 12, //px

align: 'center'

},

splitLine: { //分割线设置

show: true,

lineStyle: { //控制线条样式

color: ['#a8a8a8'],

width: 0.2,

type: 'solid'

}}

}

],

yAxis: [

{

type: 'category',

// 坐标刻度

axisTick: {

show: false,

align:'left'

},

// 轴线

axisLine: {

show:false

},

axisLabel: {//坐标轴刻度标签的相关设置。

show: true,

margin: transformFontsize(75),

color: '#b7bdbf',

fontSize:transformFontsize(14),

align: 'left'

},

inverse:true, //倒序

data:yList

}

],

series: [

{

type: 'bar',

data: [ 471, 286,501, 405,366, 298,578],

color: 'rgb(53,255,210,0.2)',

itemStyle: {

// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //渐变色

// { offset: 0, color: '#83bff6' },

// { offset: 0.5, color: '#188df0' },

// { offset: 1, color: '#188df0' }

// ])

borderWidth: 0.6,

borderColor: '#35ffd2',

borderRadius: 0, // 柱条边线圆角，单位px，默认为0

},

label: {

show: true,

position: 'right', // 位置

color: '#35ffd2',

fontSize: transformFontsize(13),

distance: transformFontsize(5), // 距离

},

},

{

type: 'bar',

data: [401,212,523, 456, 300, 267, 534],

// barWidth: transformFontsize(6),

color: 'rgb(35,105,255,0.5)',

itemStyle: {

borderWidth: 0.6,

borderColor:'#23b9ff'

},

barGap: '100%', //柱间距离

barCategoryGap: '50%', //类目间距离

label: { //对应数值

show: true,

position: 'right', // 位置

color: '#23b9ff',

fontSize: transformFontsize(13),

distance: transformFontsize(5), // 距离

},

}

]

})

})

}