【精讲】微信小程序 基础内容（组件） 轮播图及滚动菜单等

目录

第一部分：滚动菜单内容

第二部分：轮播图内容

第三部分：常用基础组件

第四部分：数据操作

---

第一部分：滚动菜单内容

wxml内容：

  

  

wxss内容： 

/* 滚动部分 */

/* .container1 view{

    width:100px;

    height:100px;

    text-align:center;

    line-height: 100px;

}

.container1 view:nth-of-type(1){

  background-color:rgb(8, 250, 28);

}

.container1 view:nth-of-type(2){

   background-color: deeppink;

}

.container1 view:nth-of-type(3){

   background-color: lightcoral;

}

.container1{

  /* display: flex;

  justify-content:space-around; */

  /* 实现滚动效果必须加宽高  */

  /* width:100px;

  height:200px;

  border:1px solid red; 

} */

第二部分：轮播图内容

wxml内容：

A

B

C

D

wxss内容：

/* 轮播图部分 */

.swiper-container1{

  height:150px;

}

.item{

  height:100%;

  line-height:150px;

  text-align: center;

}

swiper-item:nth-child(1) .item{

  background-color: red;

}

swiper-item:nth-child(2) .item{

  background-color:lightseagreen;

}

swiper-item:nth-child(3) .item{

  background-color: lightsalmon;

}

swiper-item:nth-child(4) .item{

  background-color: limegreen;

}

常用的样式表（主要用于wxml中swiper组件中控制圆点等样式的）：

 样式实现图例：

该部分是控制是否自动轮播且设置时间等，在上表中的数据全部写入swiper组件中

第三部分：常用基础组件

若不添加在text中，是不能进行长按选中

 

手机号支持长按选中效果:

134124723985

 常用的rich-text 组件 在内部添加nodes="添加标签属性"  不添加无效   注：外面的标签属性有双引号，内部必须使用单引号

 

 其它组件内容：

 按钮的不同用法：

 image的使用多种常用的模式：

写法如下：

 小程序Api的3大分类：

第四部分：数据操作

条件渲染：

wx:if与wx:hidden的区别：

wx:if在激活时就会显示，否则就会被移除，若不经常使用，建议使用wx:if语句，此外在多个语句中也可以使用wx:if 因为后面还有wx:elif及wx:else

wx:hidden在激活时就会隐藏，否则就会显示，若经常使用，建议使用wx:hidden语句

列表渲染：

wx:for语法格式：wx:for="{{array对象名}}"  wx:key="index"

具体使用：

姓名:{{item.username}},年龄:{{index}}

根据上述的内容：下面是详细的操作示例：

index.js页面：

// 获取应用实例

const app = getApp()

Page({

  data: {

    count:0,

    msg:'你好',

    type:1 ,

    flag:true,

    arr1:['苹果','华为','小米'],

    arrlist:[

      {id:1,username:'小红'},

      {id:2,username:'小明'},

      {id:3,username:'小李'},

    ]

  },

  inputHandler(e){

    // console.log(e.detail.value)

    this.setData({

      msg:e.detail.value

    })

  },

 })

 

补充：block的使用，block在页面中只会显示其内容，不会将标签暴露出来，也就是说，block只有包裹的作用，没有其它的用法。而使用view内外嵌套，那么将会内外的view标签均都会进行暴露出来，从而出现不必要的节点。

关于rps的实现原理：

 px与rps的换算：

 在开发的过程中，建议使用iPhone6的标准去换算，因为是整数，1:2的比例

关于样式的公共部分导入及使用： 

样式的权重比较：

 鼠标放入样式上即可显示出权重数据；

引入方式：@import '/pages/common/commstyle.wxss';

 关于控制小程序页面的配置项是：

 针对以上配置项，做出如下的操作示例：

 在正常情况下，"onReachBottomDistance"：50是不改变的，注：后面的px不用加，默认情况下已经加了。

关于tabBar的使用及注意事项：

 tabBar的组成部分：

 以上是6个组成部分的属性

tabBar在全局组件中使用App.json：

  

  //  pagePath是跳转的地址   text是名字

在App文件控制下面的点击跳转：

 如图所示：

第一步：

 第二步：

第三步：

 上述完善后，保存即可，默认选中的是首页，当你点击其它的页面时，其它页面内容上的点击按钮会根据你的给定的图标颜色进行改变。

注：申明的页面只能往数组的开头放，不能往后放，同时也不能在pages中放在末尾部分，必须在前面，否则会显示不了。

tabBar中必须要加list数组，随后以对象的形式将具体每个页面的内容创建在对象中。

第五部分：页面配置

首先，页面配置与全局配置，页面配置的级别高于全局配置，所以当页面与全局的配置冲突时，以页面的为主，“就近原则”，下方是页面配置，具体使用操作与全局配置一样，可见上方全局配置部分。

以下是服务器域名的配置步骤及事项： 

在小程序中修改或配置域名时，规定前面的域名地址必须是https:// 否则就会报错/无法保存等现象

正确模板：

请求方式(get/post)：

  在页面中给定一个点击按钮，添加点击事件，这里的点击事件是“bindtap”

点击按钮