常用数组方法splice、filter、map、push

arrpush(值)

值：参数

arrsplice(值1，值2，值3)

值1：起始位置

值2：删减的个数

值3：插入的值

arrfilter(function(值1，值2，值3 ){ })

值1：数组项的值

值2：索引

值3：数组本身

arrmap(function(值1，值2，值3 ){ })

值1：数组项的值

值2：索引

值3：数组本身

往左边滑动出现删除按钮， 只对当前滑动的对象 *** 作

<view class="shop-list">

    <view class="check-all-box" bindtap="onCheckAll">

      <view>

        <label class="check-around8"  bindtap="selected" data-lor='1'>

          <radio checked="{{allSelectedtrue:false}}" color="#000"></radio>

          <text class="check-all">{{checkAllText}}全选</text>

        </label> 

      </view>

    </view>

    <view class="item-box  {{itemisTouchMove 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{list}}" wx:key="{{index}}">

      <view class="item">

        <view class="check-around-box" data-id="{{itemid}}" >

            <label bindtap="selected" data-id="{{itemid}}" data-isSelect="{{itemisSelect}}">

              <radio checked="{{itemisSelect>0true:false}}" color="#000"></radio>

            </label>   

          </view>

        <view class="item-img-box">

          <image class="item-img" src="{{itemthumbUrl}}" />

        </view>

        <view class="item-info-box">

          <text class="item-title">{{itemtitle}}</text>

          <text class="item-spec">{{itemspec}}</text>

          <text class="item-price">¥{{itemprice}}</text>

          <view class="num-box">

            <view class="num-desc" data-id="{{itemid}}" data-total="{{itemtotal}}" bindtap="reduce">-</view>

            <input class="item-input" type="number"disabled="boolean" value="{{itemtotal}}" />

            <view class="num-plus" data-id="{{itemid}}" data-total="{{itemtotal}}" bindtap="plus">+</view>

          </view>

        </view>

      </view>

      <view class="remove" data-id="{{itemid}}" bindtap="remove">{{remove}}删除</view>

    </view>

  </view>

page{

  background-color: #f8f8f8;

}

shop-list {

  display: flex;

  flex-direction: column;

  margin-top: 30rpx;

  padding-bottom:120rpx;

}

check-all-box {

  display: flex;

  align-items: center;

  padding: 30rpx;

  background-color: #fff;

}

check-all-box  check-all {

  margin-left: 20rpx;

  font-size: 30rpx;

}

check-around {

  width: 35rpx;

  height: 35rpx;

  margin-right:20rpx;

  border-radius: 50rpx;

  border: 1rpx solid #f8f8f8;

}

check-active {

  width: 35rpx;

  height: 35rpx;

  border-radius: 50rpx;

  background-color: #999999;

}

item-box {

  margin-bottom: 20rpx;

  position: relative;

  z-index: 99;

  font-size: 14px;

  display: flex;

  justify-content: space-between;

  border-bottom:1px solid #ccc;

  width: 100%;

  overflow: hidden

}

item {

  display: flex;

  align-items: center;

  padding: 30rpx;

  background-color: #fff;

  position: relative;

  z-index: 99;

  width: 100%;

  margin-right:0;

  -webkit-transition: all 04s;

  transition: all 04s;

  -webkit-transform: translateX(90px);

  transform: translateX(90px);

  margin-left: -90px

}

item item-img {

  width: 180rpx;

  height: 180rpx;

  border-radius: 5rpx;

  border: 1rpx solid #eaeaea;

}

item item-info-box {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 420rpx;

  height: 180rpx;

  margin-left:20rpx;

}

item-info-box item-title {

  font-size: 30rpx;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  word-break: break-all;

}

item-info-box item-spec {

  color: #676767;

  margin-top: 15rpx;

  text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  -webkit-box-orient: vertical;

}

item-info-box item-price {

  display: flex;

  margin-top: 15rpx;

}

item-info-box num-box {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  font-size: 30rpx;

}

num-box num-desc {

  padding: 0 10rpx;

  color: #999;

  border: 4rpx solid #999;

}

num-box item-input {

  width: 80rpx;

}

item-input {

  text-align: center;

}

num-box num-plus {

  padding: 0 10rpx;

  color: #fff;

  background-color: #000;

  border: 4rpx solid #000;

}

remove {

  background-color: orangered;

  width: 90px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  -webkit-transform: translateX(90px);

  transform: translateX(90px);

  -webkit-transition: all 04s;

  transition: all 04s;

}

touch-move-active item,

touch-move-active remove {

  -webkit-transform: translateX(0);

  transform: translateX(0);

}

var app = getApp()

Page({

  data: {

    list: [

      {

        id: '1',

        thumbUrl: '>

微信小程序现在很火，于是也就玩玩，做了一个简易的留言板，让大家看看，你们会说no picture you say a j8 a,好吧先上图。

样子就是的，功能一目了然，下面我们就贴实现的代码，首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）总感觉怪怪的，有木有。

微信小程序里把div改成了view，听说div也可以用，没有实验过，不知道真假。不过就这样吧，反正原理都一样，页面效果主要看css，又错了，是wxss（微信ss）说实话总觉得……这种感觉不好多说。

看我们的布局代码，超简单，完全和css一样

才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vuejs React或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！

完美的36行，早知道wxml注释写一堆应该也凑个36，这个数字多顺啊。

哈哈哈，好了，所有的功能代码都在这里了，大家赶快也去玩玩吧。

以上就是关于常用数组方法splice、filter、map、push全部的内容，包括:常用数组方法splice、filter、map、push、微信小程序购物车 滑动删除效果、微信小程序怎么做个简单留言板等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！