#小程式區域性重新整理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；