小程序ui开发-微信小程序UI开发的小技巧-小程序ui-即速应用

小程序ui开发-微信小程序UI开发的小技巧-小程序ui

浏览量：2025 时间：2020-03-20 来源：闲暇夜里雨在下

1.swiper-item的高度
1.swiper-item的高度默认是150px，我们可以手动设置其高度，但是无法让它高度自适应，这大概算微信小程序的一个bug。如果我们使用swiper-item来做列表的话，我们需要配合scroll-view使用，我们通过wx.getSystemInfoSync()获取设备的高度信息，然后手动设置swiper的高度。从而使得我们可以实现列表滚动效果。
swiperclass="swiper-area"style="height:{{listHeight}}"current="{{currentTab}}"duration="500"bindchange="swiperTab"swiper-itemstyle="height:100%"scroll-viewclass='joined_tasks'overflow="auto"scroll-y="true"scroll-top="0px"scroll-with-animation="true"blockwx:for="{{taskInfo}}"wx:for-item="task"wx:key="task.tid"templateis="singleOrder"data="{{...task}}"/template/block/scroll-view/swiper-item!--发布的任务--swiper-itemstyle="height:100%"scroll-viewclass='created_tasks'overflow="auto"scroll-y="ture"scroll-top="0px"scroll-with-animation="true"blockwx:for="{{createdTasks}}"wx:for-item="task"wx:key="task.tid"templateis="singleTaskForTaskPage"data="{{...task}}"/template/block/scroll-view/swiper-item/swiperonLoad:function(options){constres=wx.getSystemInfoSync()this.setData({listHeight:res.windowHeight-45+"px"})},2.无边按钮
2.就算我们将button的border设为0，按钮还是会有一圈细微的边框，如果我们想设置无边按钮，我们需要在XXX::after里面将border设为none
.topUpButton{width:50%;font-weight:bold;}.withdrawButton{width:50%;font-weight:bold;}.topUpButton::after,.withdrawButton::after{border:none;}3.下拉框的下拉标志
3.图片中右边的这个标志组件是没有提供的，需要我们自己找图片添加
pickerclass="picker"mode="selector"range="{{optionalType}}"value="{{taskType}}"bindchange="bindTaskTypeChange"viewclass="taskType"{{taskType}}imageclass="picker_icon"src="../../../image/picker-icon.png"/image/view/picker
4.透明背景图片在小程序里貌似也会有背景颜色，所以为了下拉框的颜色统一，这里我用photoshop处理过小图标的背景颜色。
4.背景颜色覆盖
5.我们设置了背景颜色之后会发现，最底部的的部分覆盖不掉，这种情况是因为我们有没有设置page的高度。因此我们需要将page的height设为100%
viewclass=userpage/viewpage{height:100%;}.userPage{background-color:rgb(245,245,245);height:100%;}5.窄边效果
6.设置页面的左右padding，留下一段空白，可以得到下图的美感