微信小程序局部刷新

#小程序局部刷新Demo

第一次发微博就发个跟小程序相关的吧。记得我自学小程序的时候是2017年，当时公司要求开发一个家政类型的小程序，可我双眼一抹黑啊，对小程序啥都不懂，于是就去翻微信官方文档，亏得我天赋异禀、智慧超凡（哈哈哈~~你们都懂的我就是吹一吹），我带着有趣的眼神以及深厚的兴趣边学边做，怎料到，才一个星期我就把公司要求的小程序给做出来了。唉。。。造化弄人呐，当然我的第一个小程序很简单。行了，不瞎BB，搬砖走起。

#新建一个小程序Demo

新建一个小程序，具体的步骤大家应该都知道，我就不写了。先把页面给做出来，以下是代码截图和页面截图

  
    

      
        
          
            
          
          
            
          
          
            搜 索
            
          
        
      
    
  
  
    
      
        
        热门
      
      
    
    
      
        不限
      
      
        {{item.name}}
      
    
  

  
    
      
        
        历史搜索
      
      
    
    
      
        {{item.name}}
      
    
  



/*以下是css代码*/
/* pages/hotSearch/index.wxss */
.page{
  padding: 10rpx 20rpx;
}
.hd-sch{
  background: #fff;
  border-radius: 12rpx;
  padding: 10rpx 0;
}
.sch-box{
  padding: 0 0 0 20rpx;
}
.sch-img{
  width: 36rpx;
  height: 36rpx;
}
.weui-cell__ft{
  position: relative;
  width: 170rpx;
  display: flex;
}
.right-img{
  width: 170rpx;
  height: 80rpx;
}
.sch-txt{
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4rpx;
  font-size: 32rpx;
}
button{
  background: rgba(0,0,0,0);
  border: none;
  outline: none;
}
.local-img{
  width: 34rpx;
  height: 34rpx;
  padding-right: 20rpx;
}
.sch-tit{
  display: flex;
  align-items: center;
  width: 100%;
}
.hot-sch{
  border-bottom: 2rpx solid #e8e8e8;
  margin-bottom: 20rpx;
}
.weui-grid{
  border: none;
  text-align: center;
}
.grid-btn{
  padding: 10rpx 0rpx!important;
}
.weui-grids{
  border: none;
}
.grid-text{
  width: 92%;
  border-radius: 8rpx;
  border: 2rpx solid #ccc;
  padding:10rpx 0rpx;
}
.grid-checked{
    width: 92%;
  border-radius: 8rpx;
  border: 2rpx solid rgb(29,130,210);
  color: rgb(29,130,210);
  padding:10rpx 0rpx;
}
.page__bd{
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 0 20rpx #ccc;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

/*以下是js代码*/
// pages/hotSearch/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hotId: 0,
    historyId: 0,
    addressList: [{ id: 1, name: '江西' }, { id: 2, name: '江苏' }, { id: 3, name: '安徽' }, { id: 4, name: '上海' }, { id: 5, name: '重庆' }, { id: 6, name: '北京' }, { id: 7, name: '杭州' }, { id: 8, name: '宁波' }, { id: 9, name: '舟山' }, { id: 10, name: '连云港' }],
    addressList: [{ id: 1, name: '江西' }, { id: 2, name: '江苏' }, { id: 3, name: '安徽' }, { id: 4, name: '上海' }, { id: 5, name: '重庆' }, { id: 6, name: '北京' }, { id: 7, name: '杭州' }, { id: 8, name: '宁波' }, { id: 9, name: '舟山' }, { id: 10, name: '连云港' }]
  },
  
  //搜索
  searchSubmit(e) {
    console.log('搜索', e)
  },
  
  //点击热搜
  checkHot(e) {
    console.log('选择', e)//获取点击项的内容(在xhml里面用data-id='item.id'绑定下id，这里点击的时候就会获取到id)
    this.setData({
      hotId: e.currentTarget.dataset.id//记录下点击的热搜id
    })
  },
  
  //点击历史
  checkHistory(e) {
    console.log('选择', e)//获取点击项的内容(在xhml里面用data-id='item.id'绑定下id，这里点击的时候就会获取到id)
    this.setData({
      historyId: e.currentTarget.dataset.id//记录下点击的历史ID
    })
  }
})

!(

以及是实现的效果图，可以用此操作来实现局部刷新，小程序上的点赞效果同理。我知道我很牛逼，但是你们可以不用告诉我，第一次写博客，不是很详细请见谅。日后有新见解会持续更新，望大家给个关注的小心心~~~~~♥(ˆ◡ˆԅ)~~~~我感觉我快要飞起来了。
博客IDID：qq_39024950；
我的QQ：510169899；