微信小程序view标签布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jiangwudidebaba/article/details/88699646

首先微信小程序运行在谷歌里面，感觉微信官方的这个工具绝逼在谷歌浏览器上加工的，感觉有点意思，所以别被微信小程序的那套语法给忽悠住了其实感觉还是在写普通的前端页面，先说一下用的比较多的view的布局吧

view 要么横着排，可以选择换行或者不换行，要么竖着排就这样
我这边排出来的效果是这样，可以自动换行的

具体的写法大家可以参照一下，是不是感觉就是普通html样式的写法呢，其实就是

.context{

  width: 100%;
  height: 100px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  flex-wrap:nowrap;
  margin-bottom:40px; 
  
}

.box{
  width: 22%;
  margin: 5px;
  height: 100px;
  border-color:blue;
  background-color:#E0FFFF;
}
.img{
  width: 100%;
  height: 100%;
}

<view class="context">
  <view class="box" bindtap='getJavaDetail'>
  <image></image>
  <view>知识点</view>
  </view>
  
  <view class="box" bindtap='getJavaVideo'>
  <image ></image>
    <view>视频教程</view>
  </view>

  <view class="box">
  <image></image>
  <view>学习资料</view>
  </view>
   <view class="box" bindtap='getJokeList'>
   <image></image>
    <view>轻松一刻</view>
  </view>
</view>
<view class="context">
  <view class="box" bindtap='getDriverTest'>
  <image  class='img'></image>
  <view>考驾专区</view>
  </view>
  <view class="box" bindtap='getMe'>
  <image  class='img'></image>
  <view>交流反馈</view>
  </view>
</view>

布局主要抓住这些属性就能随心所欲控制

 display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  flex-wrap:nowrap;

具体的可以参考

https://blog.csdn.net/sinat_17775997/article/details/61428601

下面是我的小程序，后面会持续更新，里面有我微信，欢迎大家互相学习和探讨，