我们在这里要实现的效果是这样的，在小程序中将多个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
}
|
