微信小程序之路

Really the doctrine of the holy one is to make good use of life, make full use of life.

列表渲染

1.单个列表 wx:for

<view wx:for="{{array}}">
{{index}} : {{item.message}}
</view>

Page{{
data:{
array:{{
message: 'foo',
},{
message: 'bar'
}]
}
}}

使用 wx:for-item 可以指定数组当前元素的变量名，使用wx:for-index 可以指定数组当前下标的变量名，例如：

<view wx:for="{{array}}" wx:for-index = "idx" wx:for-item = "itemName">
{{idx}} : {{itemName.message}}
</view>

2.渲染多个应用,需要在标签上

<block wx:for = "{{[1,2,3]}}">
<view> {{index}}:</view>
<view> {{item}} </view>
</block>

视图容器组件

view

display：flex
flex-direction：row #横向
flex-direction：column #纵向

scroll-view

scroll-x：true #允许横屏滚动
upper-threshold：50 #距离顶部/左边多远时，触发 scrolltoupper 事件，tips：刷新时可能用到

bindscrolltoupper:滑动到顶部/左边，触发 scrolltoupper 事件
bindscrolltolower:滑动到底部/右边，触发 scrolltolower 事件
bingscroll:滑动时触发

swiper

视图悬浮

position: fixed;

position: absolute:弹窗可以用

圆角+阴影

圆角：border-radius: 10rpx;

部分圆角：

border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;

阴影： box-shadow: 0rpx 2rpx 5rpx 5rpx rgba(128, 128, 128, 0.253);