微信小程序开发日记——高仿知乎日报（上） - iyifei(2)_H5之家

代码中有一个显眼的animation属性，这个属性就是用来控制动画的。

/** * 旋转上拉加载图标 */ function updateRefreshIcon() { var deg = 360; var _this = this; var animation = wx.createAnimation( { duration: 1000 }); var timer = setInterval( function() { if( !_this.data.loadingMore ) clearInterval( timer ); animation.rotateZ( deg ).step(); deg += 360; _this.setData( { refreshAnimation: animation.export() }) }, 1000 ); }

当列表加载数据时，给动画设置一个时长duration，然后按Z轴旋转，即垂直方向旋转rotateZ，每次旋转360度，周期是1000毫秒。

列表的布局跟上次的小豆瓣图书的结构差不多，用到了循环结构wx:for和判断语句wx:if、 wx:else来控制不同的展示方向。

<view class="common-list"> <block wx:for="{{pageData}}"> <view class="list-item {{item.images[0] ? 'has-img': ''}}" wx:if="{{item.type != 3}}" data-id="{{item.id}}" bindtap="toDetailPage"> <view class="content"> <text>{{item.title}}</text> </view> <image wx:if="{{item.images[0]}}" src="{{item.images[0]}}" class="cover"></image> </view> <view class="list-spliter" wx:else> <text>{{item.title}}</text> </view> </block> </view>

class="list-spliter"这块是用来显示日期，列表中的日报只要不是同一天的记录，就在中间插入一条日期显示块。在列表项中有一个三元运算判断输出具体的class{{item.images[0] ? 'has-img': ''}}，是因为列表中可能没有图片，因此需要判定当前有没有图片，没有图片就不添加class为has-img来控制带有图片列表项的布局。

浮动按钮

因为小程序中没有侧栏组件，无法做到侧滑手势显示侧栏（本人发现touchstart事件和tap事件有冲突，无法实现出手势侧滑判断，所以没有用侧滑手势，可能是本人理解太浅了，没有发现解决方法，嘿嘿…），浮动按钮的样式参照了Android中的FloatAction经典按钮。可以浮动在界面上，还可以滑动到任意位置，背景为稍微透明。

<view class="float-action" bindtap="ballClickEvent" style="opacity: {{ballOpacity}};bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent"> </view> .float-action { position: absolute; bottom: 20px; right: 30px; width: 50px; height: 50px; border-radius: 50%; box-shadow: 2px 2px 10px #AAA; background: #1891D4; z-index: 100; }

按钮的样式随便弄了一下，宽高用了px是因为后面的移动判断需要获取屏幕的宽高信息，这些信息的单位是px。wxml绑定了点击事件和移动事件，点击事件是控制侧栏弹出，滑动事件是按钮移动。

//浮动球移动事件 ballMoveEvent: function( e ) { var touchs = e.touches[ 0 ]; var pageX = touchs.pageX; var pageY = touchs.pageY; if( pageX < 25 ) return; if( pageX > this.data.screenWidth - 25 ) return; if( this.data.screenHeight - pageY <= 25 ) return; if( pageY <= 25 ) return; var x = this.data.screenWidth - pageX - 25; var y = this.data.screenHeight - pageY - 25; this.setData( { ballBottom: y, ballRight: x }); }

touchmove事件中的会传递一个event参数，通过这个参数可以获取到当前手势滑动到的具体坐标信息e.touches[ 0 ]

侧滑菜单

侧滑菜单是一个经典APP布局方案，小程序中没有提供这个组件，甚是遗憾。不过实现起来也不是很难，但是总感觉有点别扭…