微信小程序tabBar 微信小程序

实现微信小程序的导航跳转

1.在app.json中配置路由

  "pages": [
    "pages/index/index",
    "pages/coupon/coupon",
    "pages/shop/shop",
    "pages/mine/mine"
  ],

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/coupon/coupon",
        "text": "优惠券",
        "iconPath": "image/index.png",
        " ": "image/indexs.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "找好店",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      }
    ]
  },

iconPath：是你的图标

selectedIconPath：是激活的图标

pagePath：路径

text：标题名字

如果需要使用全局配置还需要在当前的json文件页面引入app.json

  "usingComponents": {
    "./app.json": "../../app.json"
  }

效果图：

小诸葛 tabBar 微信小程序菜单 7-10

评论(0) 浏览(947)

字母掉落js 前端

字母飘落代码

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #fff;
            box-sizing: border-box;
        }

        body {
            background-color: #000;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="js/index.js"></script>
</body>

</html>

JavaScript

window.addEventListener("load", function () {
    /**
     * @description 通过指定选择器获取对应的函数节点
     * @param {string} Selector 选择器
     * @returns 函数节点
     */

    function $(Selector) {
        let nodeList = document.querySelectorAll(Selector);
        if (nodeList.length === 0) {
            return console.warn(`{Selector}没有获取节点`);
        }
        if (nodeList.length === 1) {
            return nodeList[0];
        }
        if (nodeList.length > 1) {
            return nodeList
        }
    }
    //获取画板
    //doccument 当前文档
    //getElement 获取一个标签
    //ById 通过Id名称的方式
    //var 声明一片空间
    //var canvas 声明一片空间的名字叫做canvas
    var canvas = document.getElementById("canvas");
    //获取画板权限 上下文
    var ctx = canvas.getContext("2d");
    //让画板的大小等于屏幕的大小
    /*
        思路：
            1.获取屏幕对象
            2.获取屏幕的尺寸
            3.屏幕的尺寸赋值给画板
    */
    //获取屏幕对象
    var s = window.screen;
    //获取屏幕的宽度和高度
    var w = s.width;
    var h = s.height;
    //设置画板的大小
    canvas.width = w;
    canvas.height = h;
    //设置文字大小
    var fontSize = 14;
    //计算一行有多少个文字 取整数 向下取整
    var clos = Math.floor(w / fontSize);
    //思考每一个字的坐标
    //创建数组把clos 个 0 （y坐标存储起来）
    var drops = [];
    var str = "01";
    //往数组里面添加 clos 个 0
    for (var i = 0; i < clos; i++) {
        drops.push(0);
    }
    //绘制文字
    function drawString() {
        //给矩形设置填充色
        ctx.fillStyle = "rgba(0,0,0,0.05)"
        //绘制一个矩形
        ctx.fillRect(0, 0, w, h);
        //添加文字样式
        ctx.font = "600 " + fontSize + "px 微软雅黑";
        //设置文字颜色
        ctx.fillStyle = "#00ff00";
        for (var i = 0; i < clos; i++) {
            //x坐标
            var x = i * fontSize;
            //y坐标
            var y = drops[i] * fontSize;
            //设置绘制文字
            ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
            if (y > h && Math.random() > 0.99) {
                drops[i] = 0;
            }
            drops[i]++;
        }

    }
    //定义一个定时器，每隔30毫秒执行一次
    setInterval(drawString, 30);

})

效果图

字母掉落js

小诸葛字母掉落 7-9

评论(0) 浏览(788)

Vue2的双向数据绑定原理及缺陷 Vue

Vue2的双向数据绑定原理及缺陷

利用订阅-开发者模式，vue初始化时会用Object.defineProperty()给data中的每一个属性添加getter和setter,同时创建dep和watcher进行依赖收集与派发更新，最后通过diff算法对比新老vnode的差异，通过patch即时更新。

Vue2使用Object.defineProperty()的缺陷是什么？

一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出
不能监听对象的新增属性和删除属性
当监听的下标对应的数据发生改变时，无法正确的监听数组的方法
vue中通过重写了7个能够改变原数组的方法来进行数据监听

简洁说明：

无法对新添加或删除的属性进行监听、无法监听数组的变化

pop: 移除并返回数组的最后一个元素。
push: 向数组末尾添加一个或多个元素，并返回新数组的长度。
shift: 移除并返回数组的第一个元素。
unshift: 向数组开头添加一个或多个元素，并返回新数组的长度。
reverse: 颠倒数组中元素的顺序（第一个元素变为最后一个，最后一个变为第一个）。
sort: 对数组元素进行排序，默认按字符串Unicode码点进行排序。
splice: 在指定位置修改数组，可以删除、替换或添加新元素，并返回被删除的元素数组。

小诸葛 Vue2 双向数据绑定原理及缺陷 7-9

评论(0) 浏览(885)

echarts如何根据窗口大小自适应 JavaScript

通过调用window.onresize 来实现，当窗口缩放之后，echarts也会重新绘制

window.onresize = function () {
      myChart.resize()
   }

小诸葛 echarts 7-9

评论(0) 浏览(894)

日期格式转换 yyyy-MM-dd JavaScript

let d1 = new Date(this.lists.joindate);
this.lists.joindate = d1.getFullYear() + "-" + (d1.getMonth() + 1) + "-" + d1.getDate();

小诸葛日期格式转换 7-7

评论(0) 浏览(734)

vuex使用 Vue

vuex的五个状态

//1.存储数据
  state: {

  },

//2.修改数据
  mutations: {

  },

3.运算属性
  getters: {

  },

4.//异步（发送请求） 
  actions: {

  },

5.模块化
  modules: {

  }

使用方法:

存储数据：

  state: {
    name:'张三',
    infodata:{},
  },

访问数据

this.$store.state.name

//推荐在计算属性里面访问

    computed: {
        x_name() {
            return this.$store.state.name
        }
    }

修改数据

定义一个方法，接受2个参数，第一个指向state,第二个是传入的值

  mutations: {
    changname(state, val) {
      state.name = val
    },
    data(state,val){
        state.infodata=val
    }
  },

触发事件通过this.$store.commit('changname', '李四')进行修改，传入2个参数，第一个是函数名，第二个修改的参数会被val接收。

代码示例

<button @click="a">点击发送修改/button>
<script>
export default {
       methods: {
          a() {
            this.$store.commit('changname', '野马')
        }
    },
}

发送请求

     //异步（发送请求） 
    //在顶部引入：import { $_ShopEeller } from '@/apis/index.js'
  actions: {
    async info (infos){ //infos,用于触发mutations里面修改方法
        let res = await $_ShopEeller()
        infos.commit('data',res)//data 定义修改的方法，res=值
    }
  },

页面调用请求

    created() { 
        //页面初始化触发actions里面请求info
        this.$store.dispatch('info')
    },

计算属性

  getters: {
    shoplist(state) {
      let newarr = []
      for (let key of state.goodlist) {
        for (let chil of key.foods) {
          if (chil.valueNum > 0) {
            newarr.push(chil)
          }
        }
      }
      return newarr
    }
  },

调用方法

在计算属性computed内调用，方法：$store.getters.shoplist 有利于性能，当引用的数据发生改变才会重新计算，有缓存性，
接收一个参数，指向state（vuex数据存储的地方）通过state.名字可以访问到，state里面的数据。

    computed: {
        numzj() {
            return this.$store.getters.shoplist
        },
    },

小诸葛 vue vuex 7-6

评论(0) 浏览(875)

vue项目提示有中文路径 Vue

解决办法:

public下面的index.html改成index.ejs就行了

小诸葛 vue 7-3

评论(0) 浏览(766)

vue.set的用法 Vue

vue.set 是 Vue.js 提供的一个全局方法，用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数：目标对象、属性名或数组索引、属性值。其用法如下：

Vue.set(target, propertyName/index, value)

参数一:需要更新的数组或对象
参数二:是数组的下标或者对象的属性名，
参数三:是更新的内容

修改数组的方法：（修改下标为2的元素为D）

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法：(修改name属性值为：李四）

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法：(修新增身高属性）

this.$set(obj, "height", 180);

{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']

小诸葛 vue $set 7-1

评论(0) 浏览(957)