小程序项目使用的标签和方法轮播图组件

在这里插入图片描述

在这里插入图片描述

https://blog.csdn.net/weixin_33906657/article/details/91393959

在这里插入图片描述

在这里插入图片描述因为使用了es6的语法

在这里插入图片描述

然后就是操作我们的数据把他们显示到页面上。

在这里插入图片描述

遍历数据，把每个变量显示到页面上。

vue中需要指的个体名和下标名，小程序不需要。

在这里插入图片描述

wx:key不需要写{ {}},也不需要对象.属性去写，直接把它的属性写上去就可以了。

在这里插入图片描述

在这里插入图片描述
结构一样，但是里面的文本不一样

抽取组件的目的是为了复用。

在这里插入图片描述

结构，样式，行为还有自己的配置。

一个页面可以包含一个和多个组件。

在这里插入图片描述

组件的结构和样式抽取出来了。

在这里插入图片描述
滚动设置了x轴排列的时候，注意设置高度。要不然默认还是按纵向排列的高度显示。
vue中的props
https://blog.csdn.net/jingtian678/article/details/81160995

在这里插入图片描述

使用滑动的组件然后把每个都遍历显示到页面就好了，看成是一整块的内容遍历。

用swipper进行滑动，按滑一次占的区域。

在这里插入图片描述

在这里插入图片描述

bindinput,表单项的内容数据发生改变就会触发。
change需要数据改变失去焦点以后才会触发。

在这里插入图片描述

在这里插入图片描述使用事件委托，绑定事件的是父元素，但是真正触发事件的是子元素。
event.target指向的元素不一定是绑定的元素，有可能是指向的是子元素委托的父元素。

在这里插入图片描述

在这里插入图片描述

里面传的直接是形参的值了，同名的属性可以不写。

在这里插入图片描述

在这里插入图片描述类似html的localstorge本地存储一直在，sessionstorge会话存储，会话一结束就释放掉了。

在这里插入图片描述
是不是刚才我们看的是自己通过页面json工具看的的。这里确认一下。
这个就相当于把数据存到本地了，只要本地的数据不清空，它就一直在。

意味着在任何一个页面都可以访问。

在这里插入图片描述

在这里插入图片描述

https://m.runoob.com/json/json-parse.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <p id="demo"></p>
    <script>
      var str = { name: "菜鸟教程", site: "http://www.runoob.com" }; //必须转换成字符串才可以显示到页面
      str_pretty1 = JSON.stringify(str);
      console.log(str);
      console.log(str_pretty1);
      console.log(typeof str); //对象
      console.log(typeof str_pretty1); //字符串
      document.write(str_pretty1);
      document.write("<br>");
      document.write(str);
      // document.write("只有一个参数情况：");
      // document.write("<br>");
      // document.write("<pre>" + str_pretty1 + "</pre>");
      // document.write("<br>");
      // str_pretty2 = JSON.stringify(str, null, 4); //使用四个空格缩进
      // document.write("使用参数情况：");
      // document.write("<br>");
      // document.write("<pre>" + str_pretty2 + "</pre>"); // pre 用于格式化输出
    </script>
  </body>
</html>

在这里插入图片描述