小程序-类九宫格布局和点击切换选中效果分享

分享一个最近项目里用到的类九宫格的效果，和当点击某一个单元格子时，该单元格变成红色的选中状态，其他单元格则变为未选中的黑色状态。
效果图如下所示：

效果截图

实现的原理很简单，先用template定义每一个格子，然后使用flex布局，flex-wrap=wrap（自动换行）。而选中效果则通过遍历数组的方式，改变数组变量的值，从而改变页面标签的类名称来实现。实现的代码如下，仔细阅读下就明白了，很简单。
首先实现各单元的template：
selectItem-template.wxml

<template name="selectItemTemplate">
      <view catchtap='changeItem' data-itemId="{{itemid}}" class="{{chageColor?'selected select-container':'normal select-container'}}">
            <text>{{text}}</text>
      </view>
</template>

selectItem-template.wxss

.select-container {
      width: 223rpx;
      height: 100rpx;
      border: solid 1px;
      margin: 20rpx 0 0 20rpx;
      border-radius: 3px;
}

.select-container text {
      position: absolute;
      width: 223rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
}

.selected{
      color: red
}
.normal{
      color: black;
}

然后是九宫格列表的template：
selectItem-list-template.wxml

<import src="../selectItem-template/selectItem-template.wxml" />
<template name="selectItemListTemplate">
      <view class='seletct-list-template'>
            <view class='inner-container'>
                  <block wx:for="{{selectItems}}" wx:for-item="selectItem" wx:key="key">
                        <template is="selectItemTemplate" data="{{...selectItem}}" />
                  </block>
            </view>
      </view>
</template>

selectItem-list-template.wxss

@import "../selectItem-template/selectItem-template.wxss";

.seletct-list-template {
      background-color: white;
      width: 100%;
      height: 234rpx;
}

.inner-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
}

最后是主页的实现代码：
index.wxml

<import src="selectItem-list-template/selectItem-list-template.wxml" />
<view class='selectItem'>
            <template is="selectItemListTemplate" data="{{selectItems}}" />
</view>

index.wxss

@import "selectItem-list-template/selectItem-list-template.wxss";
.selectItem {
      background-color: white;
      margin-top: 20rpx;
      height: 380rpx;
}

index.js

Page({

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

      /**
       * 生命周期函数--监听页面加载 
       */
      onLoad: function (options) {
            //九宫格内容数据
            var selectItems = [{ "text": "10元", "itemid": "1", "chageColor": false }, { "text": "20元", "itemid": "2", "chageColor": false }, { "text": "50元", "itemid": "3", "chageColor": false }, { "text": "100元", "itemid": "4", "chageColor": false }, { "text": "200元", "itemid": "5", "chageColor": false }, { "text": "300元", "itemid": "6", "chageColor": false }, { "text": "500元", "itemid": "7", "chageColor": false}];
            this.setData({
                  selectItems: selectItems
            });
      },

      //点击单元格子
      changeItem:function(event){
            var itemid = event.currentTarget.dataset.itemid;
            var newSelectItems = [];
            for (var i = 0; i < this.data.selectItems.length; i++){
                  if (itemid == this.data.selectItems[i].itemid){
                        //"text": "10元", "itemid": "1", "chageColor": false
                        newSelectItems[i] = {
                              "text": this.data.selectItems[i].text,
                              "itemid": this.data.selectItems[i].itemid,
                              "chageColor": true
                        };
                  }else {
                        newSelectItems[i] = {
                              "text": this.data.selectItems[i].text,
                              "itemid": this.data.selectItems[i].itemid,
                              "chageColor": false
                        };
                  }
            }

            this.setData({
                  selectItems: newSelectItems,
            });
      }
})

到此，九宫格的布局和点击切换选中效果的实现就完成了。