微信小程序之楼层效果
|
?
今天做了一个小程序实现一个楼层效果? 带大家分享下经验和api的使用吧 ?如图 将左边和右边各分了一个组件? 目录如下
? 其中list页面是这个楼层效果的页面?? components是组成这个页面的两个组件 list为列表组件? ?title为右边字母固定的组件 list主页面的代码如下
<!--pages/list/list.wxml--> <view class='container'> ='box'> ='left' wx:if="{{contentList.length}}"> list contentList="{{contentList}}" class="listComponent" currentKey="{{currentKey}}" bind:ChangeId="changeId"></list</view='right'title wx:for="{{titleList}}" wx:key="{{index}}" title="{{item}}"="{{titleIndex===index?'titleActive':''}}" index="changeId" bind:Changekey='changekey'title> >
上述代码用到的api 有如下几点 1、组件的调用? 需要我们在下list.json先配置下? 然后直接当成标签使用
2、组件的传值? 如上述代码?? contentList="{{contentList}}" 这种写法就是组件间的传值 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组件代码 id="{{item.key}}"='content'text ='title'>{{item.key}}text>
='item' ="{{item.row}}"="{{index}}"image src='{{item.img}}' ='img'image='item-text'>{{item.name}}scroll-view1、首先? 我们这个页面需要做一个滚动列表? 然后调用了下人家封装好的 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第一次获取没有获取到 就是因为上面的那个判断条件没有写
?
我们的数据是通过请求传过来的? 第一次向这个子组件传了个空数组 页面什么也没有渲染? 而这个周期执行了一遍
所以导致我们什么都没有获取到? 找了半天才发现? ?简直到了怀疑人生的地步 唉~~~
?
?
?
下面顺带介绍下生命周期吧
?
页面生命周期
? 组件的生命周期 created?组件实例化，但节点树还未导入，因此这时不能用setData attached 节点树完成，可以用setData渲染节点，但无法操作节点 ready 组件布局完成，这时可以获取节点信息，也可以操作节点 moved 组件实例被移动到树的另一个位置 detached 组件实例从节点树中移除 ? ? 组件生命周期不带on? 页面的带on ? 最后介绍下下面地步的配置 通过全局配置?tabBar 在app.json配置如下 "tabBar": {
"color": "#333333",//字体颜色
"selectedColor": "#f00",0);">选中颜色
"backgroundColor": "#ffffff",0);">底部导航颜色
"borderStyle": "black",0);">边框色
"position": "bottom",0);">设置是在底部还是顶部
"list": [
{
"text": "首页",0);">文字内容
"selectedIconPath": "./static/index-active.png",0);">选中的时候图片展示
"iconPath": "./static/index.png",0);">平常状态下的图片样式
"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"
}
]
},
? ? ? ? ?本文GitHup的地址? ?https://github.com/qiang-chen/weixin-project （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
