微信小程序 九宫格列表 wxs脚本验证手机号码

效果图

主页面跳转

<!-- 九宫格 -->
<view class="grid-list">
<!-- 将标签设置为 navigator 并且将id title传值过去 -->
<navigator class="grid-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>

shoplist.wxml 页面布局

<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}"></image>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话：{{tools.slitPhone(item.phone)}}</text>
<text>地址：{{item.address}}</text>
<text>营业时间：{{item.businessHours}}</text>
</view>
</view>
<!-- 利用wxs 脚本处理手机号码 -->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>

shoplist.wxss 样式处理

/* pages/shoplist/shoplist.wxss */
.shop-item{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  display: block;
}
.info{
  margin-left: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;
}

shoplist.js 数据交互 获取

// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      query:{},  //获取url传值的参数
      shopList:[], //商品信息
      page:1,
      pageSize:10,
      total:0,
      isloading:false
  },

  /**
   * 获取商铺列表数据
   */
  getShopList(cb){
    this.setData({
      isloading:true
    })

    // 展示loading 效果
    wx.showLoading({
      title: '数据加载中...',
    })

    wx.request({
      url: 'https://www.escook.cn/categories/'+this.data.query.id+'/shops',
      method:'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },
      success:(res)=>{
        console.log(res);
        this.setData({
          shopList:[...this.data.shopList, ...res.data],
          total:res.header['X-Total-Count'] - 0
        })
      },
      complete:()=>{
          // 隐藏loading 效果
          wx.hideLoading();
          this.setData({
            isloading:false
          })
         // wx.stopPullDownRefresh();  //关闭下拉刷新窗口
         cb && cb()  // 利用回调函数进行关闭下拉刷新
      }
    })
  },

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 利用API动态设置页面的导航栏title setNavigationBarTitle 只能在onReady调用
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 重置数据
    this.setData({
      page:1,
      shopList:[],
      total:0
    })
// 传入回调函数执行 下拉刷新关闭
    this.getShopList(()=>{wx.stopPullDownRefresh()});
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isloading) return
    // 判断是否还有下一页数据 
    if(this.data.page * this.data.pageSize >= this.data.total){
      // 没有下一页数据了
      wx.showToast({
        title: '数据加载完毕',
        icon:'none'
      })
      return
    }else{
      this.setData({
        page:this.data.page + 1
      })
      this.getShopList();
    }
  }

})

shoplist.json 页面配置

{
  "usingComponents": {},
  "enablePullDownRefresh": true, 
  "onReachBottomDistance": 100,
  "backgroundColor": "#EFEFEF",
  "backgroundTextStyle":"dark"
}

tools.wxs 脚本处理

function toLower(str){
  return str.toLowerCase()
}

module.exports ={
  toLower:toLower
}

完结