PHP 二维数组按照某个键值重新排序

需求:可预订排在前,不可预订排在后,即对既有数据进行重新排序,数据为二维数组,问题转换为根据二维数组的某 key 的值对二维数组进行重排

最开始使用 二维数组降为一维数组,使用 asort/arsort 进行排序,排序完成后根据一维数组的位置替换成二维数组

结果是可以重拍,但问题是对 value 值相同的数据也会打乱重排。

第二种方法使用冒泡排序,也是用二维数组降为一维数组,使用冒泡排序重拍一维,再根据一维的序号替换成二维数组

结果不可重拍,因为冒泡只替换了 value 的位置,key 的位置并没有重拍。常规的冒泡仅是解决索引数组的排序,若想用冒泡的方式,需要对关联数组进行冒泡

第三种方法使用 array_multisort() 函数

array_multisort() 函数对多个数组或多维数组进行排序。
参数中的数组被当成一个表的列并以行来进行排序 – 这类似 SQL 的 ORDER BY 子句的功能。第一个数组是要排序的主要数组。数组中的行(值)比较为相同的话,就会按照下一个输入数组中相应值的大小进行排序,依此类推。

/**数组根据某一value值进行排序
 * @param $arr 二维数组
 * @param $keys 指定按哪列排序
 * @param string $order_by 正序 or 倒叙
 * @param bool $key 原 key 是否保留
 * @param string $way 排序方法
 * @return array 二维数组
 */
private function array_sort($arr,$keys,$order_by='desc',$key=FALSE,$way='bubble'){
  $tmp_array = $new_array = array();
  foreach($arr as $k=>$v){
    $tmp_array[$k] = $v[$keys];
  }

  if($way == 'sort'){
    //sort 方法排序,可以重拍,但是相同值的顺序会被打乱
    if($order_by =='asc'){
      asort($tmp_array);
    }else{
      arsort($tmp_array);
    }
  }elseif($way == 'bubble'){
    //冒泡排序,不能重拍
    if($order_by == 'desc') {
      for ($i = 0; $i < count($tmp_array) - 1; $i++) {
        for ($j = 0; $j < count($tmp_array) - $i - 1; $j++){
          if ($tmp_array[$j]<$tmp_array[$j+1]) {
            $t = $tmp_array[$j];
            $tmp_array[$j] = $tmp_array[$j+1];
            $tmp_array[$j+1] = $t;
          }
        }
      }
    }elseif($order_by == 'asc'){
      for ($i = 0; $i < count($tmp_array) - 1; $i++) {
        for ($j = 0; $j < count($tmp_array) - $i - 1; $j++){
          if ($tmp_array[$j]>$tmp_array[$j+1]) {
            $t = $tmp_array[$j];
            $tmp_array[$j] = $tmp_array[$j+1];
            $tmp_array[$j+1] = $t;
          }
        }
      }
    }
  }elseif($way == 'multisort'){
    //multisort 方法排序,相同值的顺序按顺序输出
    if($order_by == 'desc'){
      array_multisort(array_column($arr,$keys),SORT_DESC,$arr);
      $tmp_array = $arr;
    }elseif($order_by == 'asc'){
      array_multisort(array_column($arr,$keys),SORT_ASC,$arr);
      $tmp_array = $arr;
    }
  }

  reset($tmp_array);
  foreach($tmp_array as $k=>$v){
    if($key==TRUE){
      $new_array[$k] = $arr[$k];
    }else{
      $new_array[] = $arr[$k];
    }
  }
  return $new_array;
}

 

微信小程序 自定义模态框 Modal 淡入淡出动画效果 Fade-in Fade-out

WXML

<!-- 自定义模态框 -->
<view bindtap='fadeInDlg'  style='display:flex;justify-content: center;'><text>点击</text></view>
<view class="mask" bindtap='fadeOutDlg' animation="{{animationBgData}}" catchtouchmove="preventTouchMove" wx:if="{{showModalDlg}}"></view>
<view class="modalDlg" animation="{{animationData}}" wx:if="{{showModalDlg}}">
    <text>获取授权</text>
    <text>检测到您未授权小程序获取您的用户信息,是否重新授权?</text>
    <view>
    <button bindtap="modelCancel">取消</button>
    <button bindtap="modelC">确定</button>
    </view>
</view>

WXSS

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0;
}
.modalDlg{
    width: 580rpx;
    height: 400rpx;
    position: fixed;
    top: 60%;
    left: 0;
    z-index: 9999;
    margin: -370rpx 85rpx;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    
}
.modalDlg>text{
  font-size:30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modalDlg>text:first-child{
  height:80rpx;
  font-weight: 700;
  width:100%;
  border-bottom: 1rpx solid #CCC;
}
.modalDlg>text:nth-child(2){
  height:100rpx;
  margin:0 40rpx;
}
.modalDlg>view{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modalDlg>view>button{
  width:290rpx;
  height:80rpx;
  font-size: 30rpx;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid #CCC;
}
.modalDlg>view>button:first-child{
  border-right:1rpx solid #CCC;
}
.modalDlg>view>button::after {
  border-radius: 0;
}

JS

Page({

  data: {
    showModalDlg: false
  },
  onLoad: function() {

  },
  fadeInDlg:function(){
    this.setData({
      showModalDlg:true
    })

    var animation = wx.createAnimation({
      duration:0,
      timingFunction:'step-start',
    })
    animation.opacity(0).scale(0.8,0.8).step();
    this.setData({
      animationData: animation.export()
    })
    animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease',
    })
    animation.opacity(1).scale(1,1).step()
    this.setData({
      animationData:animation.export()
    })

    var animationBg = wx.createAnimation({
      duration: 200,
      timingFunction: 'step-start',
    })
    animationBg.opacity(0).step()
    animationBg = wx.createAnimation({
      duration:500,
      timingFunction:'ease',
    })
    animationBg.opacity(0.5).step()
    this.setData({
      animationBgData:animationBg.export()
    })
  },
  fadeOutDlg:function(){
    var _this = this
    var animation = wx.createAnimation({
      duration:200,
      timingFunction:'ease',
    })
    animation.opacity(0).scale(0.8, 0.8).step();
    this.setData({
      animationData:animation.export()
    })

    var animationBg = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease',
    })
    animationBg.opacity(0).step()
    this.setData({
      animationBgData: animationBg.export()
    })

    setTimeout(function(){
      this.setData({
        showModalDlg: false
      })
    }.bind(this),200)
  },

  preventTouchMove: function() {
    //阻止触摸
  },

})

 

微信小程序 自定义模态框,带 Button 组件的 Model 框

WXML

<!-- 自定义模态框 -->
<view class="mask" bindtap='modelCancel' catchtouchmove="preventTouchMove" wx:if="{{showModalDlg}}"></view>
<view class="modalDlg" wx:if="{{showModalDlg}}">
    <text>获取授权</text>
    <text>检测到您未授权小程序获取您的用户信息(头像/昵称),是否重新授权?
    请依次点击 授权->登录</text>
    <view>
    <button open-type="openSetting">授权</button>
    <button bindtap="toLogin">登录</button>
    </view>
</view>

WXSS

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}

.modalDlg{
    width: 580rpx;
    height: 400rpx;
    position: fixed;
    top: 60%;
    left: 0;
    z-index: 9999;
    margin: -370rpx 85rpx;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    
}
.modalDlg>text{
  font-size:30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modalDlg>text:first-child{
  height:80rpx;
  font-weight: 700;
  width:100%;
  border-bottom: 1rpx solid #CCC;
}
.modalDlg>text:nth-child(2){
  height:100rpx;
  margin:0 40rpx;
}

.modalDlg>view{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modalDlg>view>button{
  width:290rpx;
  height:80rpx;
  font-size: 30rpx;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid #CCC;
}
.modalDlg>view>button:first-child{
  border-right:1rpx solid #CCC;
}
.modalDlg>view>button::after {
  border-radius: 0;
}

JS

Page({

  data: {
    showModalDlg: true
  },

  preventTouchMove: function () {
    //阻止触摸
  },

  modelCancel:function(){
    this.setData({
      showModalDlg: false
    })
  },
})

 

微信小程序 图片使用 binderror 替换错误图片在 for 循环时发生数量的错误

测试产品列表时发现,在模拟器上使用列表筛选功能,能够正确显示列表个数,但在手机端个数显示多了,经排查是因为 img 标签使用了 binderror 功能,图片显示错误时调用了替代图片。

使用筛选功能后,产品列表的数量由 12 减少至 6,但之前 binderror 并未全部全部替换,特别是当 img 标签启用了 lazy-load=’true’ 功能,导致上一次列表的 binderror 继续执行

解决方法,插入图片时判断新列表时候有新列表的 key 存在,存在再替换默认图片 arr.hasOwnProperty()

errorFunction: function(event) {
   console.log('errorFunction')
   console.log(event)
   var index = event.currentTarget.dataset.index
   console.log(index)
   var img = 'rlist[' + index + '].DefaultPicUrl_s'

   if (this.data.rlist.hasOwnProperty(index)) {
     this.setData({
       [img]: this.data.img_error
     })
   }
 },

 

微信小程序 解决自定义弹出层滑动时下层页面滚动问题

WXML

将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false

<scroll-view scroll-y="{{showModalStatus?'true':'false'}}">

</scroll-view>
WXSS

Page 设置为绝对定位,宽高各百分之百 , scroll-view 高度 百分之百

Page{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background: #FAFAFA;
  overflow-y: hidden;
}
scroll-view{
  height:100%;
}
JS

JS 控制 showModalStatus 的开关。

 

不过这引入了新的问题,无法触发 onReachBottom  页面上拉触底事件的处理函数

不介意的话可以使用 scroll-view 的 bindscrolltolower 进行解决 bindscrolltolower 方法触发 onReachBottom()

WXML

<scroll-view bindscrolltolower='bindscrolltolower' scroll-y="{{showModalStatus?'true':'false'}}"> 

</scroll-view>

JS

bindscrolltolower:function(){
  console.log('bindscrolltolower')
  var page = getCurrentPages().pop()
  console.log(page)
  page.onReachBottom()
}

所以另一种方法

WXML

把底层页面使用 view 包裹起来,动态设置样式

<view class="{{showModalStatus?'page-fix':''}}">

</view>
WXSS

动态样式开启模态层时,绝对定位

.page-fix{
  position: fixed;
}

 

IE6/7/8 360浏览器兼容模式 无法正常加载JS 但打开调试模式可以正常加载

遇到个神奇的 BUG,在写前端时,JS 的点击事件在 Chrome 可以正常加载,但到了 IE 或是其他双核浏览器的兼容模式就无法点击,准备调试按了 F12 又莫名的可以点击了,这个问题找了好久。最后清除了缓存出现了提示,”console 未定义”。

IE 浏览器本身未定义 console 对象

解决方法就是删掉 console.log(),或是重新定一下 console.log()

重写 HTML 单选按钮 Radio CSS 样式

<style>
.radio{
  display:none
}
.radioInput{
  background-color:#fff;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:100%;
  display:inline-block;
  height:16px;
  margin-right:10px;
  margin-top:-1px;
  vertical-align:middle;
  width:16px;
  line-height:1
}
.radio:checked + .radioInput:after{
  background-color:#FFFFFF;
  border-radius:100%;
  content:"";
  display:inline-block;
  height:6px;
  margin-left:5px;
  margin-top:5px;
  width:6px
}
.checkbox.radioInput,.radio:checked + .checkbox.radioInput:after{
  border-radius:0
}
.radio:checked + .radioInput{
  border:1px solid #00A1E9;
  background-color: #00A1E9;
}
</style>
<label class="label">
    <input class="radio" type="radio" name="demo-radio">
    <span class="radioInput"></span>你好
</label>
<label class="label">
    <input class="radio" type="radio" name="demo-radio">
    <span class="radioInput"></span>再见
</label>

 

微信小程序 图片加载失败时替换为默认图片的方法

微信小程序图片加载失败显示默认图片,通常情况下:

WXML:

<image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image>

JS:

errorFunction: function(){
    this.setData({
      avatar: '/image/head.png'
    })    
}

若使用了 for 循环,代码如下

WXML:

<view wx:for="{{branchList}}" wx:key="{{key}}" wx:for-index='index'>
      <image src='{{item.branch_photo}}' binderror="errorFunction" data-index='{{index}}'></image>
</view>

JS:

errorFunction: function (event) {
   console.log(event)
   var index = event.currentTarget.dataset.index
   var img = 'branchList['+index+'].branch_photo'
     this.setData({
       [img]: '/pages/resource/img/loading.gif'
     })   
 }

Flex 布局教程

网页布局(layout)是 CSS 的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo,也可以参考。

以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties

一、Flex 布局是什么?

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
  order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

 

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

转载自:阮一峰