微信小程序之楼层效果

今天做了一个小程序实现一个楼层效果带大家分享下经验和api的使用吧

如图将左边和右边各分了一个组件目录如下

　　　其中list页面是这个楼层效果的页面

　　　components是组成这个页面的两个组件

　　　list为列表组件 title为右边字母固定的组件

list主页面的代码如下

<!--pages/list/list.wxml-->
<view class='container'>
  <view class='box'>
    <view class='left' wx:if="{{contentList.length}}">
      <list contentList="{{contentList}}" class="listComponent" currentKey="{{currentKey}}" bind:ChangeId="changeId"></list>
    </view>
  </view>
  <view class='right'>
    <title wx:for="{{titleList}}" wx:key="{{index}}" title="{{item}}" class="{{titleIndex===index?'titleActive':''}}" index="{{index}}" bind:ChangeId="changeId" bind:Changekey='changekey'></title>
  </view>
</view>

上述代码用到的api 有如下几点

1、组件的调用需要我们在下list.json先配置下然后直接当成标签使用

2、组件的传值如上述代码

contentList="{{contentList}}"  这种写法就是组件间的传值

在list组件的接收这个参数的写法

　　properties: {

　　　　contentList: Array,

　　　　currentKey: String

接收后使用的话直接当做data的参数使用就可以喽

3、父组件向子组件传个函数让子组件调用然后改变父组件某个参数

bind:ChangeId="changeId"    这样是传发   bind是必须的 用来区分是函数还是变量  bind后面的是让子组件调用使用的

引号里面为父组件真正定义的函数   注意这里直接  引号 不要加{{}}  

子组件接受这个函数并且调用

　　this.triggerEvent('ChangeId', {

　　　　id: index

　　})

4、自己定义的函数然后写在哪里

父组件的话直接找个地方写函数名就行了

但是子组件需要写在methods里面

5、加入我们定义的函数需要传参数怎么办

第二行就是传参通过data-传一个叫做id的参数这里提一下循坏的时候如果我们不去指定变量的话会是item代表每一项 index代表下标如果指定的话可以 wx:for-index="i" 指定下标 wx:for-item="myItem" 制定每一项

然后接受都在e里面如下

e.currentTarget.dataset

6、wx:if="{{contentList.length}}" 判断是否要渲染下面的元素条件注意这里的条件要放在括号里面去

这个条件需要注意下因为第一次没加这个东西出现了bug

7、class名的添加 class="{{titleIndex===index?'titleActive':''}}" 基本类似Vue 但是这里加括号

以上为主页面的知识点介绍下面介绍的list页面的知识点 title页面没有什么可说的基本上就是点击事件控制父组件的

变量得到颜色的切换以及右边连带滚动

list组件代码

<scroll-view
  scroll-y 
  scroll-into-view="{{currentKey}}" 
  scroll-with-animation 
  bindscroll="handleScroll"
  class='scroll'
>
  <view wx:for="{{contentList}}" wx:key="{{index}}" id="{{item.key}}" class='content'>
    <text class='title'>{{item.key}}</text>

    <view class='item' wx:for="{{item.row}}" wx:key="{{index}}">
      <image src='{{item.img}}' class='img'></image>
      <text class='item-text'>{{item.name}}</text>
    </view>
  </view>
</scroll-view>

1、首先我们这个页面需要做一个滚动列表然后调用了下人家封装好的 scroll-view这个组件

对于这个组件简单的介绍下

a、首先想要得到滚动效果并且触发组件封装的函数必须让其高度小于内容的高度

在上述代码中也就是 scroll这个元素小于 content这个元素

不然触发不了

b、scroll-y 设置滚动方向

　 scroll-into-view="{{currentKey}}" 这个变量绑顶右边字母的 id 在点击id的时候就会直接让右边对应的内容滚到顶部

　先给这个currtKey默认右边第一个元素的id 之后点击的时候动态改变

scroll-with-animation 添加动画效果

　bindscroll="handleScroll" 在页面滚动的时候会触发这个然后打印事件对象e会得到你想要的

在这里我们需要e.detail.scrollTop; 获取滚到高度就可以喽

c、然后此时这个题到这里基本上就完成了一大半了剩下的就是我们获取 ABC所有元素距离顶部的距离然后将这些数字储存起来然后这个函数中循坏比较改变右边class的类名就可以了 此时碰见的bug就是在子组件如何获取到某一个class类名的所有元素距离顶部高度

通过官网api查看下面这个方法就可以获取到

this.createSelectorQuery().selectAll(".content").boundingClientRect((rect) => {

rect.forEach(item => {

arr.push(item.top)

}).exec((res) => {

})

注意在子组件中是this.createSelectorQuery() 在父组件中是ws.createSelectorQuery()

此时我们在子组件的生命周期 ready第一次获取没有获取到就是因为上面的那个判断条件没有写

我们的数据是通过请求传过来的第一次向这个子组件传了个空数组页面什么也没有渲染而这个周期执行了一遍

所以导致我们什么都没有获取到找了半天才发现简直到了怀疑人生的地步唉~~~

下面顺带介绍下生命周期吧

页面生命周期

小程序注册完成后，加载页面，触发onLoad方法。
页面载入后触发onShow方法，显示页面。
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
当小程序后台运行或跳转到其他页面时，触发onHide方法。
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

组件的生命周期

created 组件实例化，但节点树还未导入，因此这时不能用setData

attached 节点树完成，可以用setData渲染节点，但无法操作节点

ready 组件布局完成，这时可以获取节点信息，也可以操作节点

moved 组件实例被移动到树的另一个位置

detached 组件实例从节点树中移除

组件生命周期不带on 页面的带on

最后介绍下下面地步的配置

通过全局配置 tabBar

在app.json配置如下

 "tabBar": {
    "color": "#333333",  //字体颜色
    "selectedColor": "#f00",  //选中颜色
    "backgroundColor": "#ffffff",  //底部导航颜色
    "borderStyle": "black", //边框色
    "position": "bottom",   //设置是在底部还是顶部
    "list": [
      {
        "text": "首页",  //文字内容
        "selectedIconPath": "./static/index-active.png",  //选中的时候图片展示
        "iconPath": "./static/index.png",  //平常状态下的图片样式
        "pagePath": "pages/index/index"   //点击要跳转的位置
      },
      {
        "text": "通讯录",
        "selectedIconPath": "./static/find-active.png",
        "iconPath": "./static/find.png",
        "pagePath": "pages/list/list"
      },
      {
        "text": "购物车",
        "selectedIconPath": "./static/cart-active.png",
        "iconPath": "./static/cart.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text": "我的",
        "selectedIconPath": "./static/me-active.png",
        "iconPath": "./static/me.png",
        "pagePath": "pages/my/my"
      }
    ]
  },