小程序swiper实现订单页面

myOrder.wxml

  1. <!--pages/myorder/myorder.wxml-->
  1.  <view class="swiper-tab">
  2.    <block wx:for="{{swipertab}}" wx:key="sptab">
  3.      <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}"
  4.      data-current="{{item.index}}"
  5.      bindtap="tabSwitch">{{item.name}}</view>
  6.    </block>
  7.  </view>
  8.  
  9.  <swiper current="{{currtab}}" style="height:{{deviceH-31}}px" bindchange="onTabChange">
  10.    <swiper-item>
  11.      <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
  12.        <view class="container-0">
  13.          <view class="order" wx:for="{{allOrderS}}" wx:key="{{item.orderid}}" wx:for-item="order">
  14.            <view class="orderNumber">订单编号：{{order.orderid}}</view>
  15.            <view class="orderStatus">{{order.status}}</view>
  16.            <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data-orderid="{{order.orderid}}">
  17.                <image src='{{item.image}}'></image>
  18.                <view class='orderDetail'>
  19.                  <view class='orderTitle'>{{item.title}}</view>
  20.                  <view class='orderStyle'>
  21.                    <view class="orderColor">{{item.properties}}</view>
  22.                    <!-- <view class="orderSize">{{item.size}},</view>
  23.                    <view class="orderUnit">{{item.unit}}</view> -->
  24.                  </view>
  25.                </view>
  26.                <view class='orderInfor'>
  27.                  <view class='orderPrice'>{{item.price}}</view>
  28.                  <view class='orderNum'>{{item.number}}</view>
  29.                </view>
  30.            </view>
  31.            <view class='orderSumPri'>
  32.              共{{order.totalNumber}}件商品 合计：
  33.              <view class='orderPri'>{{order.totalPrice}}元</view>
  34.            </view>
  35.            <view class="orderHander">
  36.              <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
  37.              <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
  38.            </view>
  39.          </view>
  40.        </view>
  41.      </scroll-view>
  42.    </swiper-item>
  43.    <swiper-item>
  44.      <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
  45.        <view class="container-1">
  46.          <view class="order" wx:for="{{waitPayOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
  47.            <view class="orderNumber">{{order.orderid}}</view>
  48.            <view class="orderStatus">{{order.status}}</view>
  49.            <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
  50.                <image src='{{item.image}}'></image>
  51.                <view class='orderDetail'>
  52.                  <view class='orderTitle'>{{item.title}}</view>
  53.                  <view class='orderStyle'>
  54.                    <view class="orderColor">{{item.properties}}</view>
  55.                    <!-- <view class="orderColor">{{item.color}}</view>
  56.                    <view class="orderSize">{{item.size}}</view>
  57.                    <view class="orderUnit">{{item.unit}}</view> -->
  58.                  </view>
  59.                </view>
  60.                <view class='orderInfor'>
  61.                  <view class='orderPrice'>{{item.price}}</view>
  62.                  <view class='orderNum'>{{item.number}}</view>
  63.                </view>
  64.            </view>
  65.            <view class='orderSumPri'>
  66.              共{{order.totalNumber}}件商品 合计：
  67.              <view class='orderPri'>{{order.totalPrice}}元</view>
  68.            </view>
  69.            <view class="orderHander">
  70.              <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
  71.              <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
  72.            </view>
  73.          </view>
  74.        </view>
  75.      </scroll-view>
  76.    </swiper-item>
  77.    <swiper-item>
  78.      <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
  79.        <view class="container-2">
  80.          <view class="order" wx:for="{{waitSentOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
  81.            <view class="orderNumber">{{order.orderid}}</view>
  82.            <view class="orderStatus">{{order.status}}</view>
  83.            <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
  84.              <image src='{{item.image}}'></image>
  85.              <view class='orderDetail'>
  86.                <view class='orderTitle'>{{item.title}}</view>
  87.                <view class='orderStyle'>
  88.                  <view class="orderColor">{{item.properties}}</view>
  89.                  <!-- <view class="orderColor">{{item.color}}</view>
  90.                  <view class="orderSize">{{item.size}}</view>
  91.                  <view class="orderUnit">{{item.unit}}</view> -->
  92.                </view>
  93.              </view>
  94.              <view class='orderInfor'>
  95.                <view class='orderPrice'>{{item.price}}</view>
  96.                <view class='orderNum'>{{item.number}}</view>
  97.              </view>
  98.            </view>
  99.            <view class='orderSumPri'>
  100.              共{{order.totalNumber}}件商品 合计：
  101.              <view class='orderPri'>{{order.totalPrice}}元</view>
  102.            </view>
  103.            <view class="orderHander">
  104.              <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
  105.              <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
  106.            </view>
  107.          </view>
  108.        </view>
  109.      </scroll-view>
  110.    </swiper-item>
  111.    <swiper-item>
  112.      <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
  113.        <view class="container-3">
  114.          <view class="order" wx:for="{{waitReceivedOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
  115.            <view class="orderNumber">{{order.orderid}}</view>
  116.            <view class="orderStatus">{{order.status}}</view>
  117.            <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
  118.                <image src='{{item.image}}'></image>
  119.                <view class='orderDetail'>
  120.                  <view class='orderTitle'>{{item.title}}</view>
  121.                  <view class='orderStyle'>
  122.                    <view class="orderColor">{{item.properties}}</view>
  123.                  </view>
  124.                </view>
  125.                <view class='orderInfor'>
  126.                  <view class='orderPrice'>{{item.price}}</view>
  127.                  <view class='orderNum'>{{item.number}}</view>
  128.                </view>
  129.            </view>
  130.            <view class='orderSumPri'>
  131.              共{{order.totalNumber}}件商品 合计：
  132.              <view class='orderPri'>{{order.totalPrice}}元</view>
  133.            </view>
  134.            <view class="orderHander">
  135.              <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
  136.              <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
  137.            </view>
  138.          </view>
  139.        </view>
  140.      </scroll-view>
  141.    </swiper-item>
  142.    <swiper-item>
  143.      <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
  144.        <view class="container-4">
  145.          <view class="order" wx:for="{{completeOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
  146.            <view class="orderNumber">{{order.orderid}}</view>
  147.            <view class="orderStatus">{{order.status}}</view>
  148.            <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data->
  149.              <image src='{{item.image}}'></image>
  150.              <view class='orderDetail'>
  151.                <view class='orderTitle'>{{item.title}}</view>
  152.                <view class='orderStyle'>
  153.                  <view class="orderColor">{{item.properties}}</view>
  154.                  <!-- <view class="orderColor">{{item.color}}</view>
  155.                  <view class="orderSize">{{item.size}}</view>
  156.                  <view class="orderUnit">{{item.unit}}</view> -->
  157.                </view>
  158.              </view>
  159.              <view class='orderInfor'>
  160.                <view class='orderPrice'>{{item.price}}</view>
  161.                <view class='orderNum'>{{item.number}}</view>
  162.              </view>
  163.            </view>
  164.            <view class='orderSumPri'>
  165.            共{{order.totalNumber}}件商品 合计：
  166.            <view class='orderPri'>{{order.totalPrice}}元</view>
  167.            </view>
  168.            <view class="orderHander">
  169.              <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
  170.              <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
  171.            </view>
  172.          </view>
  173.        </view>
  174.      </scroll-view>
  175.    </swiper-item>
  176.  </swiper>

myOrder.js

  1. // pages/myOrder/myOrder.js
  1.  import {
  2.    ApiUrl
  3.  } from '../../utils/apiurl.js';
  4.  import {
  5.    httpReq
  6.  } from '../../utils/http.js';
  7.  Page({
  8.  
  9.    /**
  10.     * 页面的初始数据
  11.     */
  12.    data: {
  13.      currtab: 0,//当前滑块的index
  14.      swipertab: [{ name: '全部', index: 0 }, { name: '待付款', index: 1 }, { name: '待发货', index: 2 }, { name: '待收货', index: 3 }, { name: '已完成', index: 4 }],
  15.      height: 0,
  16.      allOrderS: [],//全部订单
  17.      waitPayOrder: [],//待付款订单
  18.      waitSentOrder: [],//待发货订单
  19.      waitReceivedOrder: [],//待收货订单
  20.      completeOrder: [],//已完成订单
  21.      token: '',//app.js里面拿token
  22.      vipid: '',//会员号
  23.      ifhiddenone: true,//按钮隐藏
  24.      ifhiddentwo: false //按钮隐藏
  25.    },
  26.    /**
  27.     * 请求数据
  28.     */
  29.    getGoods: function () {
  30.      let that = this
  31.      httpReq({
  32.        header: {
  33.          'Content-Type': 'application/json',
  34.          'Accept': 'application/json'
  35.        },
  36.        //获取数据的接口，
  37.        url: ApiUrl.phplist + 'order/getorder?token=' + this.data.token + '&member_id=' + this.data.vipid,
  38.      }).then((res) => {
  39.        let lists = res.data.lists
  40.        //数据重组
  41.        let orders = []
  42.        let waitPayOrder = []
  43.        let waitSentOrder = []
  44.        let waitReceivedOrder = []
  45.        let completeOrder = []
  46.        for (let m in lists) {
  47.          let ss = {}
  48.          let goods = []
  49.          ss.orderid = lists[m].order_sn
  50.          ss.totalNumber = Number(lists[m].pay_num)
  51.          ss.totalPrice = Number(lists[m].order_amount)
  52.          if (lists[m].pay_status == '0') {
  53.            ss.status = "待付款"
  54.            ss.orderHandleOne = '取消订单'
  55.            ss.orderHandleTwo = '确认付款'
  56.          }
  57.          else if (lists[m].pay_status == '1') {
  58.            ss.status = "已取消"
  59.            ss.ifhiddenone = true,
  60.            ss.ifhiddentwo = true
  61.          }
  62.          else if (lists[m].pay_status == '2') {
  63.            ss.status = "待发货"
  64.            ss.orderHandleOne = '催TA发货'
  65.            ss.orderHandleTwo = '申请退款'
  66.          }
  67.          else if (lists[m].pay_status == '3') {
  68.            ss.status = "待收货"
  69.            ss.orderHandleOne = '申请退款'
  70.            ss.orderHandleTwo = '确认收货'
  71.           }
  72.          else {
  73.            ss.status = "已完成"
  74.            ss.orderHandleTwo = '删除订单'
  75.            ss.ifhiddenone = true
  76.            }
  77.          for (let n in lists[m].goods) {
  78.             let mm = {}
  79.            // console.log(lists[m].goods[n])
  80.            if (lists[m].goods[n].hasOwnProperty('goods_logo')) {
  81.              mm.image = lists[m].goods[n].goods_logo
  82.            }
  83.            if (lists[m].goods[n].hasOwnProperty('goods_name')) {
  84.              mm.title = lists[m].goods[n].goods_name
  85.            }
  86.            if (lists[m].goods[n].hasOwnProperty('goods_price')) {
  87.              mm.price = lists[m].goods[n].goods_price
  88.            }
  89.            if (lists[m].goods[n].hasOwnProperty('number')) {
  90.              mm.number = lists[m].goods[n].number
  91.            } 
  92.  
  93.            goods.push(mm)
  94.            ss.goods = goods
  95.          }
  96.          if (ss.status == "待付款") {
  97.            waitPayOrder.push(ss)
  98.          }
  99.          if (ss.status == "待发货") {
  100.            waitSentOrder.push(ss)
  101.          }
  102.          if (ss.status == "待收货") {
  103.            waitReceivedOrder.push(ss)
  104.          }
  105.          if (ss.status == "已完成") {
  106.            completeOrder.push(ss)
  107.          }
  108.          completeOrder
  109.          orders.push(ss)
  110.        }
  111.        // console.log(orders)
  112.        // console.log(that)
  113.        that.setData({
  114.          allOrderS: orders,
  115.          waitPayOrder: waitPayOrder,
  116.          waitSentOrder: waitSentOrder,
  117.          waitReceivedOrder: waitReceivedOrder,
  118.          completeOrder: completeOrder
  119.        })
  120.      })
  121.    },
  122.    /**
  123.     * 生命周期函数--监听页面加载
  124.     */
  125.    onLoad: function (option) {
  126.      let token = wx.getStorageSync('token')//缓存中获取数据
  127.      let vipid = wx.getStorageSync('vipid')//缓存中获取vipid
  128.      this.setData({
  129.        token: token,
  130.        vipid: vipid
  131.      })
  132.      //拿后台数据
  133.      this.getGoods()
  134.      //外部进入时默认选swiper的index为currtab,如果获取失败就默认设置为0.
  135.      if (option.currtab == null || option.currtab == '') {
  136.        option.currtab = 0
  137.      } else {
  138.        let tab = option.currtab
  139.        this.setData({
  140.          currtab: tab
  141.        })
  142.      }
  143.    },
  144.    /**
  145.     * 生命周期函数--监听页面初次渲染完成
  146.     */
  147.    onReady: function () {
  148.      this.getDeviceInfo()
  149.    },
  150.    /*
  151.    * 设置swiper高度，swiper本身高度限制必须重写否则里面内容过多不显示，这是swiper本身的坑。
  152.     */
  153.    getDeviceInfo: function () {
  154.      let that = this
  155.      wx.getSystemInfo({
  156.        success: function (res) {
  157.          that.setData({
  158.            deviceW: res.windowWidth,
  159.            deviceH: res.windowHeight
  160.          })
  161.        }
  162.      })
  163.    },
  164.    /**
  165.     * @Explain：选项卡点击切换
  166.     */
  167.    tabSwitch: function (e) {
  168.      var that = this
  169.      let tab = e.target.dataset.current
  170.      if (this.data.currtab === tab) {
  171.        return false
  172.      } else {
  173.        that.setData({
  174.          currtab: tab
  175.        })
  176.      }
  177.    },
  178.    /**
  179.   * 选项卡滑动切换页面
  180.   */
  181.    onTabChange: function (e) {
  182.      var that = this
  183.      let tab = e.detail.current
  184.      that.setData({
  185.        currtab: tab
  186.      })
  187.    },
  188.    /**
  189.     * 点击订单进入订单详情
  190.     */
  191.    orderDetailShow: function(e) {
  192.      // console.log(e.currentTarget.dataset.orderid)
  193.      let orderid = e.currentTarget.dataset.orderid
  194.      wx.navigateTo({
  195.          //订单详情接口
  196.        url: '../orderDetail/orderDetail?orderid=' + orderid
  197.      })
  198.    },
  199.    /**
  200.     * 生命周期函数--监听页面显示
  201.     */
  202.    onShow: function () {
  203.    },
  204.  
  205.    /**
  206.     * 生命周期函数--监听页面隐藏
  207.     */
  208.    onHide: function () {
  209.  
  210.    },
  211.  
  212.    /**
  213.     * 生命周期函数--监听页面卸载
  214.     */
  215.    onUnload: function () {
  216.  
  217.    },
  218.  
  219.    /**
  220.     * 页面相关事件处理函数--监听用户下拉动作
  221.     */
  222.    onPullDownRefresh: function () {
  223.  
  224.    },
  225.  
  226.    /**
  227.     * 页面上拉触底事件的处理函数
  228.     */
  229.    onReachBottom: function () {
  230.  
  231.    },
  232.  
  233.    /**
  234.     * 用户点击右上角分享
  235.     */
  236.    onShareAppMessage: function () {
  237.  
  238.    }
  239.  })

myOrder.wxss

  1.  /* pages/myorder/myorder.wxss */
  2.  .on {
  3.    color: red;
  4.    border-bottom:2px solid red;
  5.  }
  6.  
  7.  swiper {
  8.    height: auto;
  9.  }
  10.  
  11.  .swiper-tab {
  12.    width: 750rpx;
  13.    height: 80rpx;
  14.    background: #f5f7f9;
  15.    display: flex;
  16.    justify-content: space-around;
  17.    margin-top: 18rpx;
  18.    margin-bottom: 36rpx;
  19.  }
  20.  
  21.  .swiper-tab view {
  22.    width: 90rpx;
  23.    height: 80rpx;
  24.    font: 30rpx/76rpx "";
  25.    color: #333;
  26.    text-align: center;
  27.  }
  28.  
  29.  .container-0 {
  30.    box-sizing: border-box;
  31.  
  32.  }
  33.  
  34.  .container-1 {
  35.    box-sizing: border-box;
  36.  }
  37.  
  38.  .container-2 {
  39.    box-sizing: border-box;
  40.  }
  41.  .container-3 {
  42.    box-sizing: border-box;
  43.  }
  44.  
  45.  .container-4 {
  46.    box-sizing: border-box;
  47.  }
  48.  
  49.  .orderNumber {
  50.    float: left;
  51.    font-size: 24rpx;
  52.    padding-left: 20rpx;
  53.    padding-top: 10rpx;
  54.  
  55.  }
  56.  
  57.  .orderStatus {
  58.    float: right;
  59.    font-size: 28rpx;
  60.    padding-left: 20rpx;
  61.    padding-top: 10rpx;
  62.    padding-right: 19rpx;
  63.    color: orangered;
  64.  }
  65.  
  66.  .order {
  67.    box-sizing: border-box;
  68.    width: 678rpx;
  69.    background: #e6e6e6;
  70.    margin: 0 auto;
  71.    border-radius: 20rpx;
  72.    padding-bottom: 32rpx;
  73.    margin-bottom: 20rpx;
  74.  }
  75.  
  76.  image {
  77.    width: 150rpx;
  78.    height: 150rpx;
  79.  }
  80.  
  81.  .order .orderList {
  82.    clear: both;
  83.    display: flex;
  84.    flex-direction: row;
  85.    padding-top: 32rpx;
  86.    padding-left: 20rpx;
  87.  }
  88.  
  89.  .orderDetail {
  90.    margin-left: 21rpx;
  91.  }
  92.  
  93.  .orderDetail .orderTitle {
  94.    width: 260rpx;
  95.    height: 62rpx;
  96.    font: 28rpx/28rpx "";
  97.    color: #333;
  98.  }
  99.  
  100.  .orderDetail .orderStyle {
  101.    width: 103rpx;
  102.    height: 24rpx;
  103.    font: 24rpx/24rpx '';
  104.    color: #999;
  105.    margin-top: 17rpx;
  106.    display: flex;
  107.    flex-direction: row;
  108.  
  109.  }
  110.  
  111.  .orderInfor {
  112.    margin-left: 116rpx;
  113.  }
  114.  
  115.  .orderInfor .orderPrice {
  116.    width: 98rpx;
  117.    height: 19rpx;
  118.    font-size: 24rpx;
  119.  }
  120.  
  121.  .orderInfor .orderNum {
  122.    width: 30rpx;
  123.    height: 19rpx;
  124.    font-size: 24rpx;
  125.    color: #999;
  126.    margin-top: 26rpx;
  127.  }
  128.  
  129.  .orderSumPri {
  130.    width: 286rpx;
  131.    height: 20rpx;
  132.    font: 22rpx/24rpx '';
  133.    color: #999;
  134.    display: flex;
  135.    flex-direction: row;
  136.    margin-left: 385rpx;
  137.    margin-top: 10rpx;
  138.  }
  139.  
  140.  .orderHander {
  141.    box-sizing: border-box;
  142.    width: 100%;
  143.    display: flex;
  144.    flex-direction: row;
  145.    padding-left: 379rpx;
  146.    padding-top: 10rpx;
  147.  }
  148.  
  149.  .kk {
  150.    margin-left: 510rpx;
  151.  }
  152.  .orderCancel, .applyrefund{
  153.    width: 130rpx;
  154.    height: 35rpx;
  155.    font: 19rpx/35rpx "";
  156.    color: #333;
  157.    background: #fff;
  158.    text-align: center;
  159.    margin-right: 19rpx;
  160.    border-radius: 26rpx;
  161.    border: 1rpx solid #333;
  162.  }
  163.  .orderConfirm, .urgeSent, .confirmReceipt {
  164.    width: 130rpx;
  165.    height: 35rpx;
  166.    font: 19rpx/35rpx "";
  167.    color: #333;
  168.    background: #fff;
  169.    text-align: center;
  170.    border-radius: 20rpx;
  171.    border: 1rpx solid #333;
  172.  }
  173.   .order .mou{
  174.    color: #FF9130;
  175.  }
  176.  
  177.  myOrder.json
  178.  
  179.  {
  180.    "usingComponents": {}
  181.  }
  1. 效果类似于如下图，

  1.  

小程序swiper实现订单页面的更多相关文章

  1. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  2. 微信小程序swiper高度自适应，swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  3. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  4. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  5. 小程序-web-view嵌入H5页面遇到的bug

    遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...

  6. 小程序内嵌H5页面判断微信及小程序环境

    判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...

  7. 微信小程序生命周期、页面生命周期、组件生命周期

    1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...

  8. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  9. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

随机推荐

  1. 第十四周总结&实验报告八

    实验八 实现一个简单的记事本操作,有菜单项的 import java.awt.event.ActionEvent; import java.awt.event.ActionListener; impo ...

  2. 【Linux-设备树】.dtb文件的反汇编

    在使用设备树时我们将**.dts文件利用dtc编译器编译为**.dtb文件. 在已知**.dtb文件的情况下我们有两种方法可以得到dts源码: 方法一:使用fdtdump工具进行反汇编 使用命令:ro ...

  3. [19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)

    一.文本标签 em:用来表示一段内容的着重点,语气上的强调.一般显示为斜体 i:是斜体显示,和em显示效果一样.h5规定不需要着重的内容而是单纯加粗或斜体可以用i或b.用的不多 strong:用来表示 ...

  4. springboot2.0-统一处理返回结果和异常情况

    一.统一处理返回结果和异常处理的原因: 1.在springboot项目里我们希望接口返回的数据包含至少三个属性: a.code:请求接口的返回码,成功或者异常等返回编码,例如定义请求成功,code = ...

  5. 简洁的Asp.net菜单控件

    http://www.cnblogs.com/ruinet/archive/2009/11/10/1599984.html asp.net自带的菜单控件采用的table和javascript,导致生成 ...

  6. ThinkPHP5微信支付扩展库(超级简单, 超级超好用!)

    ThinkPHP5微信支付最新扩展库(2017年9月24日). 我的想法很简单,就是只需要调用一个静态方法就可以完成支付,查询,退款,查账等等, 无需重复造轮子, 专注自己业务!欢迎到Github查看 ...

  7. oracle PL/SQL编程基础知识

    在oracle中使用pl/sql来扩展SQL的功能,使得SQL能够更加的灵活,功能更加强大,效率更高.pl/sql让sql也能执行判断,循环等操作.主要记录一下pl/sql的基本语法和基本条件判断语句 ...

  8. 安装RF

    pip install robotframework wxPython pip install robotframework-ride pip install --pre --upgrade robo ...

  9. 2019 蓝桥杯国赛 B 组模拟赛 D. 程序设计：公约数

    蒜头君有n个数,他想要从中选出k个数,使得它们的最大公约数最大.请你求出这个最大的最大公约数. 输入格式第一行输入两个整数 .第二行输入 个整数 . 输出格式输出一个整数. 数据范围 样例输入14 3 ...

  10. fhq_treap || BZOJ 3223: Tyvj 1729 文艺平衡树 || Luogu P3391 【模板】文艺平衡树（Splay）

    题面: [模板]文艺平衡树(Splay) 题解:无 代码: #include<cstdio> #include<cstring> #include<iostream> ...