51dev.com IT技术开发者社区

51dev.com 技术开发者社区

微信小程序实现三行三列九宫格布局的方法教程

IT技术学习阅读(966)2018-07-01 收藏0次评论

九宫格布局在移动端使用较多,总结一下自己的方法。微信小程序实现三行三列的九宫格

方法1:使用百分比

        一个父容器设置宽度为100%,父容器中包含九个小格子,宽度为父容器的33.3%(此处需要自己调试),然后使其横向排列,三格结束自动挤到下一行排列。

方法二:使用wx:for创建一个三行三列的九宫格。此处就是js中的双层for循环原理,在小程序中显示两个对象的嵌套。第一次循环第一个对象(obj),第二次循环第一个对象中的另外一个对象(obj.items),弹性盒子布局。

    obj:[

      {

        id:0,

        items:[

          { id: 0, src: '../../img/12.jpg', text: '代办理赔' },

          { id: 1, src: '../../img/12.jpg', text: '拖车' },

          { id: 2, src: '../../img/12.jpg', text: '紧急救援' },

        ],

      },{

        id:1,

        items:[

          { id: 3, src: '../../img/12.jpg', text: '事故车定损' },

          {id: 4, src: '../../img/12.jpg', text: '保险代理' },

          {id: 5, src: '../../img/12.jpg', text: '查勘定损' }

        ]

      },{

        id: 3,

        items1: [

          { id: 6, src: '../../img/12.jpg', text: '数据统计' },

          { id: 7, src: '../../img/12.jpg', text: '修改密码' },

          { id: 8, src: '../../img/12.jpg', text: '退出登录' }

        ]

      }

    ],

具体实现如下:

wxml代码实现简单样式搭建:

    <view class="page-zong"  wx:for="{{obj}}" wx:key="{{id}}">

      <block wx:for="{{item.items}}" wx:key="{{id}}" wx:for-item="items" >

        <view class="page-section" bindtap="bind" data-name="{{items.text}}">

               <view class="img">

                  <image src="{{items.src}}" title="{{items.src}}" >

              </view>

              <view class="pages-text-zong">

                  <text class="pages-text">{{items.text}}</text>

              </view>

        </view>

      </block>

    </view>

js数据的填充:

    obj:[

      {

        id:0,

        items:[

          { id: 0, src: '../../img/12.jpg', text: '代办理赔' },

          { id: 1, src: '../../img/12.jpg', text: '拖车' },

          { id: 2, src: '../../img/12.jpg', text: '紧急救援' },

        ],

      },{

        id:1,

        items:[

          { id: 3, src: '../../img/12.jpg', text: '事故车定损' },

          {id: 4, src: '../../img/12.jpg', text: '保险代理' },

          {id: 5, src: '../../img/12.jpg', text: '查勘定损' }

        ]

      },{

        id: 3,

        items: [

          { id: 6, src: '../../img/12.jpg', text: '数据统计' },

          { id: 7, src: '../../img/12.jpg', text: '修改密码' },

          { id: 8, src: '../../img/12.jpg', text: '退出登录' }

        ]

      }

    ]

wxss的渲染:使用rem和%使其不同屏幕的更合自适应。

.page-zong{

  width: 102%;(有凹陷的感觉,需调试合适尺寸)

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  margin-left: -1%;

}

.page-section{

  flex: 1;

  border: 0.1rem solid lightgray;

  padding: 1rem 0.5rem;

  text-align: center;

}

.pages-text{

  font-size: 0.8rem;

  display: inline-block;

  margin: 0.6rem auto 0rem auto;

  font-weight: 600;

}

image{

  width: 50%;

  height: 3rem;

}

以上就是微信小程序实现三行三列九宫格布局的方法教程的全部内容。