dong

微信小程序swiper组件的应用
swiper组件官方文档描述为 “滑块视图容器”,说的常规一点,就是轮播图组件。它提供了多种属性,使swiper组...
扫描右侧二维码阅读全文
03
2018/05

微信小程序swiper组件的应用

swiper组件官方文档描述为 “滑块视图容器”,说的常规一点,就是轮播图组件。它提供了多种属性,使swiper组件的使用变得更加灵活。swiper组件在我自己的小程序项目中的应用场景主要就是类似于 “订单管理”以及其他一些比较类似的功能,它的左右滑动发送请求获取数据的交互体验比较好。下面简单的提供一下代码。

wxml

<view class="swiper-tab">
    <view bindtap="swithNav" wx:for="{{tabCont}}" wx:key="item.index" class="swiper-tab-list {{currentTab==item.index?'active':''}}" data-current='{{item.index}}'>{{item.title}}</view>
</view>
<swiper class="swiper-box" current="{{currentTab}}" duration="300" style="height:300vh" bindchange="GetCurrentTab" data-current='3'>
<swiper-item wx:for="{{tabCont}}" wx:key="{{item.index}}">
    <block wx:if="{{useDade}}">
        <block wx:for="{{useDade}}" wx:key="key" wx:for-item="item">
            <view class='content-box'>
                <view class='content-box-item'>
                    <block wx:if="{{item.state == 'renting'}}">
                        <view class='name-status-active'>
                            <view class='room-name'>
                                相关的文字描述
                            </view>
                            <view class='status'>
                                相关的文字描述
                            </view>
                        </view>
                    </block>
                    <block wx:if="{{item.state == 'reserved'}}">
                        <view class='name-status'>
                            <view class='room-name'>
                                相关的文字描述
                            </view>
                            <view class='status'>
                                相关的文字描述
                            </view>
                        </view>
                    </block>
                    <view class='room-info'>
                        <view class='room-desc'>
                            <view class="room-desc-key">
                                房间:
                            </view>
                            <view class="room-desc-value">
                                {{item.room_title}} {{item.roomId}}
                            </view>
                        </view>
                        <view class='room-desc'>
                            <view class="room-desc-key">
                                入离:
                            </view>
                            <view>

                            </view>
                        </view>
                        <view class='room-desc'>
                            <view class="room-desc-key">
                                姓名:
                            </view>
                            <view>
                                {{item.name}}
                            </view>
                        </view>
                        <view class='room-desc'>
                            <view class="room-desc-key">
                                电话:
                            </view>
                            <view>
                                {{item.phone}}
                            </view>
                        </view>
                    </view>
                    <view class='room-address'>
                        <text>地址:{{item.location}}</text>
                    </view>
                </view>
            </view>
        </block>
    </block>
</swiper-item>
</swiper>

wxss

.bg{
    width: 100%;
    height: auto;
}
.order-bg{
    width: 100%;
    height: 400vh;
}
.navbar{
  flex: none;
  display: flex;
  background: #fff;
  margin-top: 25rpx;
  font-size: 28rpx;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
}
.navbar .item.active{
  color: red;
}
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: red;
}
.zan-card__detail-row{
  margin-top: 10rpx;
  margin-right: 10rpx;
  font-size: 30rpx;
}
.oder{
  font-size: 30rpx;
}
.zan-card__img{
    width: 160rpx;
    height: 180rpx;
}
.swiper-tab {
  line-height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0;
  background-color: #ffffff;
  width: 100%;
  z-index: 1;
}
.swiper-tab-list {
  font-size: 30rpx;
  color: #777;
  text-align: center;
}
.active {
  color: red;
  border-bottom: 5rpx solid red;
}
.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 100rpx;
}
.swiper-box view {
  text-align: center;
}
.content-box{
    width: 710rpx;
    height: auto;
    margin: 20rpx 0 50rpx 20rpx;
     /* background-color: greenyellow;  */
}
.content-box-item{
    width: 100%;
    height: auto;
    border-radius: 15rpx;
    background-color: #ffffff;
    margin-bottom: 20rpx;
}
.room-info{
    padding: 20rpx;
    border-bottom: 1rpx solid #b3b3b3;
}
.room-desc{
    display: flex;
    flex-direction: row;
    font-size: 28rpx;
}
.room-address{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.room-address text{
    font-size: 23rpx;
    color: #b3b3b3;
    padding: 20rpx;
}
.name-status{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20rpx;
    font-size: 23rpx;
    background-color: #e5e5e5;
    border-radius: 15rpx 15rpx 0 0;
}
.name-status-active{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20rpx;
    font-size: 23rpx;
    background-color: #ffa800;
    border-radius: 15rpx 15rpx 0 0;
    color: #ffffff;
}
.room-desc-key{
    width: 100rpx;
}

js

Page({

data: {
      useDade:[],
        currentTab: 0,
        tabCont: [
            { "title": "全部客房", "content": "", "index": "0" },
            { "title": "已入住", "content": "", "index": "1" },
            { "title": "闲置中", "content": "", "index": "2" },
        ]
  },

 onLoad: function (options) {

  var that = this
    //获取全部订单
    wx.showToast({
        'title':'加载中...',
        'icon':'loading'
    });
    wx.getStorage({
      key: 'token',
      success: function(res){
          wx.startPullDownRefresh();
          setTimeout(function(){
              wx.request({
                  url: 'https://example.com/api',
                  data: {
                      token:res.data
                  },
                  success: function (res) {
                      console.log(res.data)
                      that.setData({
                          useDade: res.data
                      })
                  },
                  complete:function(){
                      wx.stopPullDownRefresh();
                  }
              })
          },1500);
      },
      fail: function() {
        console.log('获取缓存失败');
      },
      complete: function() {
        // complete
      }
    })
  },
  navbarTap: function (e) {
    this.setData({
        currentTab: e.currentTarget.dataset.idx
    })
},
// 获取每个tab页的内容
GetCurrentTab: function (e) {
    // console.log(e.detail.current);
    var i = e.detail.current;
    console.log(i);
    var that = this;
    this.setData({
        currentTab: e.detail.current
    });
    switch (i) {
        case 1:
        wx.startPullDownRefresh();
        this.getOrder('renting');
            break;
        case 2:
        wx.startPullDownRefresh();
        this.getOrder('reserved');
        setTimeout(function(){
            wx.stopPullDownRefresh();
        },1500);
            break;
        default :
        this.onLoad();
        setTimeout(function(){
            wx.stopPullDownRefresh();
        },1500);
            break;
    }
},
swithNav: function (e) {
    var that = this;
    that.setData({
        currentTab: e.target.dataset.current
    });
},
//根据条件获取订单数据
getOrder:function(i){
    var that = this;
    wx.showToast({
        'title':'加载中...',
        'icon':'loading'
    });
    wx.getStorage({
      key: 'token',
      success: function(res){
          wx.request({
              url: 'https://example.com/api',
              data: {
                  token: res.data,
                  state:i
              },
              header: {
                  'content-type': 'application/json' // 默认值
              },
              success: function (res) {
                  console.log(res.data)
                  that.setData({
                      useDade: res.data
                  })
              },
              complete:function(){
                  setTimeout(function(){
                      wx.stopPullDownRefresh();
                  },1500);
              }
          })
      },
      fail: function() {
        console.log('获取缓存失败');
      },
      complete: function() {
        // complete
      }
    })
},
})


我承认代码比较冗余,看起来也比较乱,不过这么做只是为了初期学习时更好的理解,后期再一步步优化吧。

Last modification:November 29th, 2018 at 11:09 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment