我们在这里要实现的效果是这样的,在小程序中将多个view居中显示
先看一下效果图
如下图效果所示:我们需要将 “延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的距离:
HTML代码:
<view class="footer"> <view class="footer-btn" style="display:flex;flex-direction: row;"> <view class="footer-btn1">延长收货</view> <view class="footer-btn2">查看物流</view> <view class="footer-btn3">提醒发货</view> <view class="footer-btn4">提醒发货</view> </view> </view> |
CSS代码:
/*底部按钮*/ .footer{ padding-bottom: 6px; } .footer-btn{ justify-content: space-around; } .footer-btn1,.footer-btn2,.footer-btn3,.footer-btn4{ font-size: 28rpx; color: #666666; border: 2rpx solid #999999; border-radius: 8rpx; line-height: 44rpx; margin-top: 8px; padding:4px 4px; } |
二:轮播
其实官网已经有了相关说明,但是这个也是通过一个实例来说明一下,小程序的轮播效果:
先看一下效果图:
var app = getApp(); Page({ data: { imgUrls: [ 'https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'https://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function(e) { this.setData({ interval: e.detail.value }) }, durationChange: function(e) { this.setData({ duration: e.detail.value }) }, }) |
data中是要设置的数据。indicatorDots设置是否有点,interval设置每隔多少毫秒进行切换,duration设置切换的速度。中对所有的照片进行遍历。这些值通过data然后在函数中进行设置。
WXML代码:
<swiper indicator-dots="{{indicatorDots}}" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="400" height="150"/> </swiper-item> </block> </swiper> |
以上就是这个轮播的的过程,主要应用组件,autoplay设置是否自动播放,interval设置每隔多少毫秒进行切换,duration设置切换的速度。中对所有的照片进行遍历。
三:实现局部元素隐藏
原理:这里主要通过在设置标志来让局部进行隐藏或者切换。
下面的代码主要是功能是:单击first第一个view隐藏,第二个展示。单击second第二个view隐藏,第一个展示。
JS代码
Page({ data:{ flag:0 }, clickMes1: function(){ falg=1 } , clickMes2: function(){ falg=1 } }) |
WXML
<view class={{flag===0?"hide":""}} bindtap="clickMes1">first </view> <view class={{flag===1?"hide":""}} bindtap="clickMes2">second</view> WCSS .hide{ display:none } |