微信小程序局部刷新

#小程序局部刷新Demo

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

#新建一个小程序Demo

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

<!--pages/hotSearch/index.wxml-->
<view class='page'>
  <view class='page__hd'>
    <form bindsubmit='searchSubmit'>
      <view class="hd-sch">
        <view class="sch-box weui-cell weui-cell_select weui-cell_select-before">
          <view class="weui-cell__hd">
            <image class='sch-img' src='/logos/otherimgs/search_selected.png'></image>
          </view>
          <view class="weui-cell__bd">
            <input class="weui-input" name="addressName" placeholder="请输入地名" />
          </view>
          <view class="weui-cell__ft">
            <button formType="submit" class='sch-txt'>搜 索</button>
            <image class='right-img' src='/logos/otherimgs/img_blue_mark.png'></image>
          </view>
        </view>
      </view>
    </form>
  </view>
  <view class='page__bd'>
    <view class="weui-cell weui-cell_access js_item hot-sch">
      <view class="weui-cell__bd sch-tit">
        <image class='local-img' src='/logos/otherimgs/localposition.png'></image>
        <text style='font-size:34rpx;color:#333;'>热门</text>
      </view>
      <view class="weui-cell__ft"></view>
    </view>
    <view class='weui-grids'>
      <view class='weui-grid grid-btn'>
        <view data-id='0' class="{{hotId==0?'grid-checked':'grid-text'}}" catchtap='checkHot'>不限</view>
      </view>
      <view class='weui-grid grid-btn' wx:for="{{addressList}}" wx:key="{{item.id}}">
        <view class="{{item.id===hotId?'grid-checked':'grid-text'}}" data-id="{{item.id}}" catchtap='checkHot'>{{item.name}}</view>
      </view>
    </view>
  </view>

  <view class='page__bd'>
    <view class="weui-cell weui-cell_access js_item hot-sch">
      <view class="weui-cell__bd sch-tit">
        <image class='local-img' src='/logos/otherimgs/localposition.png'></image>
        <text style='font-size:34rpx;color:#333;'>历史搜索</text>
      </view>
      <view class="weui-cell__ft"></view>
    </view>
    <view class='weui-grids'>
      <view class='weui-grid grid-btn' wx:for="{{addressList}}" wx:key="{{item.id}}">
        <view class="{{item.id===historyId?'grid-checked':'grid-text'}}" data-id="{{item.id}}" catchtap='checkHistory'>{{item.name}}</view>
      </view>
    </view>
  </view>

</view>
<!---------------------------------------------------------------------------------------->
/*以下是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；