请以小程序最新文档为准~:
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview
渲染列表时用 block
包裹
<block wx:for={{[1, 2, 3]}}> <view> {{index}}: </view> <view> {{item}} </view> </block>
block
不会真实渲染到页面上,只作为一个包裹元素,接受控制属性
自定义组件分为 4 部分
properties 组件接收的属性
properties: { // 输入框的默认提示 placeholder: { type: String, // 属性值的类型 value: '' // 属性默认值 } },
// 子组件 var myEventDetail = {value: ''}; // detail对象,提供给事件监听函数,写需要传给外面的数据 var myEventOption = {} // 触发事件的选项 this.triggerEvent('onclear', myEventDetail, myEventOption)
<!-- 父组件 --> <searchbar id=search-bar bind:onsearch=onSearch bind:onclear=onSearch placeholder=搜索文章内容></searchbar> <!-- 像绑定 bindtap 一样绑定自定义函数 -->
// 父组件 onSearch(e){ console.log(e.detail.value) }
// 父组件,使用 selectComponent 拿到子组件的实例,直接调用其中的方法 let searchBar = this.selectComponent('#search-bar'); searchBar.setData({ value: e.currentTarget.dataset.name }) searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});
子组件中获取 dom 宽高
// 获取屏幕宽度 let windowWidth = wx.getSystemInfoSync().windowWidth // 在组件内部需要写 this let query = wx.createSelectorQuery().in(this); let that = this; query.selectAll('.tagItem').boundingClientRect() query.exec(function (res) { let allWidth = 0; res[0].map(item=>{ allWidth = allWidth + item.width return allWidth }) let length = res[0].length let ratioWidth = allWidth / windowWidth that.setData({ allLength: length, iphone: ratioWidth + (length == 1 ? 0 : res[0].length * 0.0533) }) })
之前把调用接口的部分写到了onLoad里,从文章列表进入详情页,在从详情页点击左上角回退返回列表页,列表页的阅读数应该更新,但是没有更新,因为没有重新调文章列表接口。
所以把调文章列表接口的部分写好了onShow里。
自定义 tabbar 优化
第一次优化,将组件封装的tabbar改成页面的模版形式
1、之前用组件的形式写的,改为了 template;tabbar 上的图标都改成的 iconfont,解决点击 tabbar 时候会闪的问题
<template name=tabbar> <view class=tabbar-wrapper> <block wx:for={{tabbar.list}} wx:key=item> <navigator hover-class=none class=tabbar_nav {{item.selected ?'selected':''}} url={{item.pagePath}} style=color:{{item.selected ? tabbar.selectedColor : tabbar.color}} open-type=relaunch> <view class=tab-item><text class={{item.iconPath}} style=width: {{item.iconWidth}};height: {{item.iconHeight}}></text>{{item.text}}<text class='red-tag' wx:if={{tabbar.num && index==1}}>{{tabbar.num > 99 ? '99+' : tabbar.num}}</text></view> </navigator> </block> </view> </template>
2、点击 tabbar 时,需要销毁之前的页面,在跳到需要跳转的页面,所以在 navigator 组件用了 relaunch
第二次优化,将带有tabbar的页面都封装成组件写在页面,在页面中setData切换tab
<homePage id=home-page wx:if={{tabbarID == tabbarList.home}} bind:onclicktab=setTabbar ></homePage> <articleLibraryPage id=article-page wx:if={{tabbarID == tabbarList.article}}></articleLibraryPage> <doclistPage id=doctor-page wx:if={{tabbarID == tabbarList.doctor}}></doclistPage> <mePage id=me-page wx:if={{tabbarID == tabbarList.me}}></mePage> <tabbar id=tab-bar bind:onclick=onClickTabbar tabbarID={{tabbarID}}></tabbar>
修改的地方:
onPullDownRefresh: function () { if (this.data.tabbarID === this.data.tabbarList.article) { // 使用 selectComponent 找到组件实例,调用内部方法 let articlePage = this.selectComponent('#article-page'); articlePage.onPullDownRefresh(); } else if (this.data.tabbarID === this.data.tabbarList.doctor){ let doctorPage = this.selectComponent('#doctor-page'); doctorPage.onPullDownRefresh(); } else { wx.stopPullDownRefresh(); } },
带来的问题:
使用 iconfont
https://www.jianshu.com/p/1cfc074eeb75
登录 iconfont.cn 下载 zip 包
解压缩,其中的 .ttf 文件在 transfonter.org/ 上面转成 base64 格式
将 style.css 写入新建的 iconfont.wxss 中,上面的字体文件路径用刚刚转好的 base64 替代
在 app.wxss 中 import iconfont.wxss
注意:组件中的样式本身不受 app.wxss 影响,因此,组件中需要使用 iconfont 的时候,需要手动引一下 app.wxss 或者 iconfont.wxss
列表的左滑效果
1、在列表的父元素上绑定事件
<view class=list-container wx:for={{doctorList.list}} wx:key={{index}} > <view bindtouchstart='onTouchStartListItem' bindtouchmove='onTouchMoveListItem' style={{item.txtStyle}} >滑动的内容 </view> <view class=backCover>滑动后显示的按钮</view> </view>
.list-container{ position: relative; width:100%; height: 224rpx; overflow: hidden; } .list-item{ position: absolute; left: 0; z-index: 5; transition: left 0.2s ease-in-out; background-color: #fff; } .backCover{ Box-sizing: border-Box; width: 200rpx; height: 218rpx; position: absolute; right: 0; top: 0; z-index: 4; }
2、通过判断滑动距离修改列表项的 left 值
onTouchStartListItem: function (e) { // 是单指触碰 if (e.touches.length === 1) { // 记下触碰点距屏幕边缘的x轴位置 this.setData({ startX: e.touches[0].clientX, }) } }, onTouchMoveListItem: function (e) { var that = this if (e.touches.length == 1) { var disX = that.data.startX - e.touches[0].clientX; var deleteBtnWidth = that.data.deleteBtnWidth; var txtStyle = ; if (disX < deleteBtnWidth / 4) { txtStyle = left:0rpx; } else { txtStyle = left:- + deleteBtnWidth + rpx; } var index = e.currentTarget.id var list = that.data.doctorList.list list[index].txtStyle = txtStyle; that.setData({ doctorList: { list: list, total: that.data.doctorList.total } }) } }, onTouchEndListItem: function (e) { var that = this if (e.changedtouches.length == 1) { var endX = e.changedtouches[0].clientX; var disX = that.data.startX - endX; var deleteBtnWidth = that.data.deleteBtnWidth; var txtStyle = disX > deleteBtnWidth / 2 ? left:- + deleteBtnWidth + px : left:0px; var index = e.currentTarget.id var list = that.data.doctorList.list list[index].txtStyle = txtStyle; that.setData({ doctorList: { list: list, total: that.data.doctorList.total } }); } },
【相关学习推荐:小程序开发教程】