微信小程序局部刷新

Myth丶恋晨 2022-05-11 11:42 189阅读 0赞

# \#小程序局部刷新Demo #

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

## \#新建一个小程序Demo ##

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

<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
        })
      }
    })

!(![在这里插入图片描述][70]![在这里插入图片描述][70 1]

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

[70]: https://img-blog.csdn.net/20181019180403780?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDI0OTUw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220505/fdb61b743f2840f9b44387d000dc5b30.png