1 首先先查询数据

public function index(){
  $brand = StoreBrand::where('is_show',1)->order('sort desc,id desc')->where('pid','<>',0)->select()->toArray();
  $res =  $this->getDistrict($brand); //数组带入查询并排列 
dump($res) ;

}

public function getDistrict( $areaData )
{
   
   // 按照首字母拼音排序
   $district = array();
   foreach( $areaData as $name )
   {
      //取出第一个汉字的首字母(**需要排列的名称，我这里是cate_name**)
      //获取首字母ABCD
      $snameFirstChar = $this->_getFirstCharter($name['cate_name']); 
      //以这个首字母作为key// value值不变
      $district[$snameFirstChar][] =$name;
   }
   ksort($district);//排序
   return $district;
}


/**
 *字母排序
 */
public function _getFirstCharter($str)
{
   if(empty($str))
   {
      return '';
   }
   $fchar=ord($str{0});
   if($fchar>=ord('A')&&$fchar<=ord('z'))
      return strtoupper($str{0});
   $s1=iconv('UTF-8','GBK',$str);
   $s2=iconv('GBK','UTF-8',$s1);
   $s=$s2==$str?$s1:$str;
   $asc=ord($s{0})*256+ord($s{1})-65536;
   if($asc>=-20319&&$asc<=-20284) return 'A';
   if($asc>=-20283&&$asc<=-19776) return 'B';
   if($asc>=-19775&&$asc<=-19219) return 'C';
   if($asc>=-19218&&$asc<=-18711) return 'D';
   if($asc>=-18710&&$asc<=-18527) return 'E';
   if($asc>=-18526&&$asc<=-18240) return 'F';
   if($asc>=-18239&&$asc<=-17923) return 'G';
   if($asc>=-17922&&$asc<=-17418) return 'H';
   if($asc>=-17417&&$asc<=-16475) return 'J';
   if($asc>=-16474&&$asc<=-16213) return 'K';
   if($asc>=-16212&&$asc<=-15641) return 'L';
   if($asc>=-15640&&$asc<=-15166) return 'M';
   if($asc>=-15165&&$asc<=-14923) return 'N';
   if($asc>=-14922&&$asc<=-14915) return 'O';
   if($asc>=-14914&&$asc<=-14631) return 'P';
   if($asc>=-14630&&$asc<=-14150) return 'Q';
   if($asc>=-14149&&$asc<=-14091) return 'R';
   if($asc>=-14090&&$asc<=-13319) return 'S';
   if($asc>=-13318&&$asc<=-12839) return 'T';
   if($asc>=-12838&&$asc<=-12557) return 'W';
   if($asc>=-12556&&$asc<=-11848) return 'X';
   if($asc>=-11847&&$asc<=-11056) return 'Y';
   if($asc>=-11055&&$asc<=-10247) return 'Z';
   return null;
}

小程序端前端样式

json页面
{
“navigationStyle”: “default”,
“navigationBarTitleText”: “全部品牌”,
“usingComponents”: {
“navbar”: “/components/navbar/index”,
“van-index-bar”: “@vant/weapp/index-bar/index”,
“van-index-anchor”: “@vant/weapp/index-anchor/index”,
“van-cell”: “@vant/weapp/cell/index”
}
}

JS:

import {getBrand} from '../../api/store.js';


const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    brandList:[],
    indexList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.get_brandlist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },
  //查找产品
  get_brandlist: function () {
    var that = this;
    getBrand().then(res=>{
      that.setData({
        brandList: res.data,
        indexList: Object.keys(res.data)
      });
    });
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})