【备战春招】第16天 数据可视化，打造前端差异化竞争力 第五讲
标签：
JavaScript
课程名称： 数据可视化入门到精通-打造前端差异化竞争力
课程章节： 数据报表项目初始化+核心指标组件开发【一大波干货来袭】
主讲老师： Sam
课程内容：
今天学习的内容包括：
element-ui、echarts引入
课程收获：
5.1 心得：
const newDiv = document.createElement("div");
const textN = document.createTextNode("0");
const root = document.getElementById("root");
newDiv.appendChild(textN);
document.body.insertBefore(newDiv, root)
increment = function(){
firstC = document.body.firstElementChild
let iT = firstC.innerText
iT = parseInt(iT) + 1
firstC.textContent = iT
}
let update = setInterval(increment, 1000)
//clearInterval(update)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale"/>
<title>hello world</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Vue.createApp({
// data() {
// return {
// content: 'hello world'
// }
// },
// mounted() {
// },
// methods: {
// handleBtnClick() {
// this.content = this.content.split('').reverse().join('')
// }
// },
// template: '<div >{{content}}<button v-on:click="handleBtnClick">点击翻转</button></div>'
// }).mount('#root')
Vue.createApp({
data() {
return {
show: true,
content: 'hello world'
}
},
mounted() {
},
methods: {
handleBtnClick() {
this.show = !this.show
}
},
template: '<div ><span v-show="show">{{content}}</span><button v-on:click="handleBtnClick">显示/隐藏</button></div>'
}).mount('#root')
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data(){
return {
list:['hello','world','dell','lee'],
inutValue:''
}
},
methods:{
handleAddItem(){
this.list.push(this.inutValue)
}
},
template:'
<div>
<input v-model="inutValue"/>
<button v-on:click="handleAddItem">增加</button>
<ul>
<li v-for="(item,index) in list">{{item}}{{index}}</li>
</ul>
</div>'
}).mount('#root')
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale"/>
<title>lesson 3</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleBtnClick () {
console.log(this.inputValue)
this.list.push('hello')
}
},
template: '<div><input v-model="inputValue"/><button v-on:click="handleBtnClick">点击增加</button><ul><li v-for="(item, index) of list">{{ item }} {{ index }} </li></ul></div>'
}).mount('#root')
</script>
</html>
var config = require("../../utils/config.js");
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
pagenum: 1,
scrollTop: 0,
plateDetailList: [],
menuList: [],
currentId: '',
subMenuList: [],
optimizationDatalist: [],
city: '',
params: {
categoryId: ''
},
hasMoreData: true,
isRefreshing: false,
isLoadingMoreData: false,
IsEmpty: false
},
toSearch: function (e) {
var url = e.currentTarget.dataset.url;
wx.navigateTo({
url: url
})
},
getSubMenuData: function () { //可在onLoad中设置为进入页面默认加载
var that = this;
wx.request({
url: app.getUrl("api/MallHome/GetChildCategoryData"),
data: {
parentId: that.data.params.categoryId,
},
success: function (res) {
// console.log(res)
var result = res.data;
if (result.result) {
var listNew = that.data.subMenuList.concat(result.data); //合并数组
that.setData({
subMenuList: listNew
});
}
console.log(that.data.subMenuList)
wx.hideLoading();
},
fail: function (err) {
wx.hideLoading();
}, //请求失败
complete: function () { } //请求完成后执行的函数
})
},
getOptimizationData: function () { //可在onLoad中设置为进入页面默认加载
var that = this;
// wx.showLoading({
// title: "数据加载中..."
// });
// console.log(111 + that.data.location);
var openId = wx.getStorageSync('wxOpenId');
var pagenum = that.data.pagenum;
wx.request({
url: app.getUrl("api/MallHome/GetMallOptimizationData"),
data: {
PageNum: pagenum,
PageSize: 10,
CategoryId: that.data.params.categoryId
},
success: function (res) {
//console.log(res)
var result = res.data;
if (result.result) {
var listNew = that.data.optimizationDatalist.concat(result.data.rows); //合并数组
that.setData({
optimizationDatalist: listNew,
isLoadingMoreData: false
});
if (result.data.rows.length == 0 || result.data.rows == null) {
that.setData({
hasMoreData: false
});
}
// that.getRedEnvelopeRecord();
}
wx.hideLoading();
},
fail: function (err) {
wx.hideLoading();
}, //请求失败
complete: function () { } //请求完成后执行的函数
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.data.params.categoryId = options.Id;
wx.setNavigationBarTitle({
title: options.Name//页面标题为路由参数
})
that.getSubMenuData();
that.getOptimizationData();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
if (that.data.isRefreshing || that.data.isLoadingMoreData || !that.data.hasMoreData) {
return
}
var pagenum = that.data.pagenum + 1; //获取当前页数并+1
that.setData({
pagenum: pagenum, //更新当前页数
isLoadingMoreData: true
})
that.getOptimizationData(); //重新调用请求获取下一页数据
}
})
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦