H5、微信小程序 push、unshift 使用报错

最新推荐文章于 2022-10-09 20:45:19 发布

搬砖工KO水泥匠

最新推荐文章于 2022-10-09 20:45:19 发布

阅读量810

点赞数

分类专栏：微信H5 微信小程序

本文链接：https://blog.csdn.net/WangYC_/article/details/106468377

版权

微信H5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

微信小程序

3 篇文章 1 订阅

订阅专栏

H5、微信小程序 push、unshift 使用报错

js

var once_time = null
var fast_index = 0
Page({
  data: {
    history:"",
    history_array:[],
    keywords: ['AAAAAA', 'BBBBBB', 'CCCCCC', 'DDDDDD', 'EEEEEE', 'FFFFFF', 'GGGGGG',],
    currentIndex:0,
  },
  // 清除历史
  clearHisFn(e){
    console.log('clear history')
    let that = this;
    that.setData({
      history_array :[],
      history:''
    })
  },
  // 暴力点击下一曲
  fastClickFn(){
    let that = this
    let currentIndex = that.data.currentIndex
    fast_index = currentIndex
    fast_index++
    console.log(fast_index)
    that.setData({
      currentIndex: fast_index
    })
  },
  // 防止暴力点击 操作
  timeOnceFn(){
    let that = this    
    fast_index++
    fast_index = (fast_index < 10) ? fast_index:0 
    console.log(fast_index)
    clearTimeout(once_time)
    once_time = setTimeout(function(res){
      that.setData({
        currentIndex: fast_index
      })
    },1000)
  },  
  // 添加历史记录
  addKeyWordsFn(e){
    let kw = e.currentTarget.dataset.key;
    let that = this
    let history = that.data.history
    history = kw + ',' + history
    let a = history.split(',')

    for(var i=1;i<a.length;i++){ // 从第二个开始判断 是否有存在重复
      if(a[0]==a[i]){        
        a.splice(i,1)
      }else if(a[i]==''){
        a.splice(i, 1)
      }
    }
    history = a.join(',')
    console.log(history)
    that.setData({
      history: history,
      history_array:a
    })
  },
  onLoad: function(res) {
    
  },
  onShow(){
    let that = this
    let currentIndex = that.data.currentIndex
    fast_index = currentIndex
  }
})

HTML

<view>测试字符串拼接生成</view>



<!-- 关键词 -->
<view class="title">关键词</view>
<view wx:for="{{keywords}}" wx:for-item="keys" wx:key="index" wx:for-index="index" class="keywords" bindtap="addKeyWordsFn" data-key="{{keys}}">
  {{keys}}
</view>

<!-- 历史记录 -->
<view class="title">历史记录
  <view catchtap="clearHisFn">清除记录</view>
</view>
<view wx:for="{{history_array}}" wx:for-item="key" wx:key="index" wx:for-index="index" class="keywords">
  {{key}}
</view>

<!-- 下一曲 暴力点击测试 -->
<view catchtap="fastClickFn">暴力点击下一曲</view>
<view catchtap="timeOnceFn">增加防暴力点击锁 点击下一曲</view>

css

.keywords {
  background: #ff6767;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  width: auto;
  display: inline-block;
  padding:10rpx 25rpx;
  margin: 10rpx;
}
.title {
  width: 100%;
  background: #f5f5f5;
  font-size: 32rpx;
  font-weight: 700;
  padding: 10rpx ;
  margin: 20rpx  0;
}
.title>view{
  width: 30vw;
  text-align: center;
  background: #cccccc;
  color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  margin: 20rpx 0 0 0;
}