0
点赞
收藏
分享

微信扫一扫

【深入理解设计模式】策略设计模式

流沙雨帘 03-14 12:30 阅读 2

app.json

{
  "pages": [
    "pages/index/index",
    "pages/building/building",
    "pages/room/room",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  },

  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",

  "requiredPrivateInfos": [
    "chooseLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于为您提供准确的服务"
    }
  }
}

index.wxml

<!-- cell-group-root 开放式样式类 -->
<van-cell-group 
  title="小区"
  custom-class="cell-group-root"
  >
  <!-- custom-class 开放性样式类 
       is-link 箭头(默认向右)
       ?point={{ item.title }}将标题当数据传到下一个界面-->
  <van-cell
      wx:for="{{ points }}" 
      wx:key="*this" 
      title="{{ item.title }}" 
      link-type="navigateTo"
      url="/pages/building/building?point={{ item.title }}" 
      is-link 
      custom-class="cell-root"
  />
</van-cell-group>

index.wxss

.cell-group-root{
  margin-right: 30rpx !important;
}

.cell-root{
  padding: 10rpx 40rpx !important;
  margin: 10rpx 10rpx;
  background-color: #99CCFF !important;
  border-radius: 30rpx;
}

index.js

Page({
  data:{
    "points":[//手写点数据
      {
        "title":"蒙德小区"
      },
      {
        "title":"璃月小区"
      },
      {
        "title":"稻妻小区"
      },
      {
        "title":"须弥小区"
      },
      {
        "title":"至冬小区"
      },
      {
        "title":"枫丹小区"
      },
      {
        "title":"纳塔小区"
      }
    ]
  }
})

building.wxml

<view class="building">
  <van-cell-group 
  title="楼号"
  custom-class="cell-group-root"

  >
  <!-- 以数字size作为循环体则为0~size-1 -->
    <van-cell
      custom-class="cell-root"
      wx:for="{{size}}"
      wx:key="*this"
      title="{{ point + (item + 1) + type }}"
      link-type="navigateTo"
      url="/pages/room/room?point={{ point }}&building={{ (item + 1) + type }}"
      is-link
    />
  </van-cell-group>
</view>

building.wxss

.cell-group-root{
  margin-right: 30rpx !important;
}

.cell-root{
  padding: 10rpx 40rpx !important;
  margin: 10rpx 10rpx;
  background-color: rgba(32, 128, 247,0.5) !important;
  border-radius: 30rpx;
}


building.js

Page({
  data: {
    size: 0,
    point: '',
    type: '',
  },

  // 获取地址参数
  onLoad({ point }) {
    // 生成假数据
    this.fake(point)
  },

  fake(point) {
    // 生成楼栋数(用于上课)
    const size = Math.floor(Math.random() * 4) + 3
    // 楼栋名称(xx小区 / xx栋)
    const type = size > 4 ? '号楼' : '栋'
    // 数据渲染(相同名字直接解构赋值!!!so好用!!!)
    this.setData({ size, type, point })
  }
  
})

room.wxml

<van-cell-group  
  title="房间号"
  custom-class="cell-group-root"
  >
  <van-cell
    custom-class="cell-root"
    wx:for="{{rooms}}"
    wx:key="*this"
    title="{{ point + building + item }}"
    link-type="navigateTo"
    url="xxx"
    is-link
  />
</van-cell-group>

room.wxss

.cell-group-root{
  margin-right: 30rpx !important;
}

.cell-root{
  padding: 10rpx 40rpx !important;
  margin: 10rpx 10rpx;
  background-color: rgba(32, 128, 247,0.5) !important;
  border-radius: 30rpx;
}

room.js

Page({
  data: {
    point: '',
    building: '',
    rooms: [],
  },
  onLoad({ point, building }) {
    // 创建房间
    this.fake(point, building)
  },
  fake(point, building) {
    // 生成多少个房间
    const size = Math.floor(Math.random() * 5) + 4
    const rooms = []
    for (let i = 0; i < size; i++) {

      // 楼层号生成 1 ~ 20(温馨提醒:1. random生成,2.floor向下取整)
      const floor = Math.floor(Math.random() * 19) + 1

      // 具体的房间号生成 1 ~ 3
      const No = Math.floor(Math.random() * 2) + 1

      //用空气连接
      const room = [floor, 0, No].join('')
      // 检测是否有重复的房间号
      if (rooms.includes(room)) {
        break
      }

      // 记录生成完整的房间号
      rooms.push(room)
    }
    // 渲染数据
    this.setData({ rooms, point, building })
  }
})

在这里插入图片描述

举报

相关推荐

0 条评论