微信小程序开发-网格布局 - Powered by Discuz! Archiver

蒹葭林夕 發表於 2020-3-24 14:03:00

微信小程序开发--网格布局

<img src="https://img2020.cnblogs.com/blog/1087111/202003/1087111-20200324133301164-19621009.png">
 
 
 实现上图元素布局两种实现方法：
1.微信小程序原生组件。
.wxml
<div class="cnblogs_code">
<pre> 1 <view class="plate">
 2 <navigator url="/pages/program/program" hover-class="navigator-hover" class="plate-item">
 3 <view class="plate-img">
 4 <image src="{{a1src}}"></image>
 5 <text class="plate-info">
 6 编程开发
 7 </text>
 8 </view>
 9
10 </navigator>
11 <navigator url="/pages/english/english" hover-class="navigator-hover" class="plate-item">
12 <view class="plate-img">
13 <image src="{{a2src}}"></image>
14 <text class="plate-info">
15 英语学习
16 </text>
17 </view>
18
19 </navigator>
20 <navigator url="/pages/ideology/ideology" hover-class="navigator-hover" class="plate-item">
21 <view class="plate-img">
22 <image src="{{a3src}}"></image>
23 <text class="plate-info">
24 思政课堂
25 </text>
26 </view>
27
28 </navigator>
29 <navigator url="/pages/interest/interest" class="plate-item">
30 <view class="plate-img">
31 <image src="{{a4src}}"></image>
32 <text class="plate-info">
33 生活兴趣
34 </text>
35 </view>
36 </navigator>
37 </view></pre>
</div>
.wxss
<div class="cnblogs_code">
<pre> 1 .plate{
 2 display: flex;
 3 margin: 10rpx 0 10rpx 0;
 4 background-color: #f4f;
 5 }
 6 .plate-item{
 7 width: 25vw;
 8 display: flex;
 9 align-items: center;
10 flex-direction: column;
12 } 
13 .plate-img{
14 padding-top: 40rpx;
15 padding-bottom: 40rpx;
16 }
17
18 .plate-img image{
19 width: 100rpx;
20 height: 100rpx;
21 }
22 .plate-info{
23 font-size: 27rpx;
25 }</pre>
</div>
.js
<div class="cnblogs_code">
<pre>1 a1src: '../../images/image/a1.png',
2 a2src: '../../images/image/a2.png',
3 a3src: '../../images/image/a3.png',
4 a4src: '../../images/image/a4.png',</pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/1087111/202003/1087111-20200324135141785-717215739.png">
 
 
 2.引入vant组件。vant组件的引入方式参见官方文档：https://youzan.github.io/vant-weapp/#/quickstart
.wxml
<div class="cnblogs_code">
<pre>1 <van-grid clickable="true" column-num="4" border="{{ false }}">
2 <van-grid-item use-slot wx:for="{{navItem}}" wx:for-item="a" wx:key="a"link-type="navigateTo" url="{{a.imgto}}" >
3 <image style="width: 100rpx; height: 100rpx;" src="{{a.imgsrc}}"></image>
4 <text class="imginfo">{{a.imginfo}}</text>
5 </van-grid-item>
6 </van-grid></pre>
</div>
.js,主要是数据绑定
<div class="cnblogs_code">
<pre> 1 navItem: [
 2 {
 3 imgsrc: '../../images/image/a1.png',
 4 imginfo:'编程开发',
 5 imgto:'/pages/program/program'
 6 },
 7 {
 8 imgsrc: '../../images/image/a2.png',
 9 imginfo: '英语学习',
10 imgto: '/pages/english/english'
11 },
12 {
13 imgsrc: '../../images/image/a3.png',
14 imginfo: '思政课堂',
15 imgto: '/pages/ideology/ideology'
16 },
17 {
18 imgsrc: '../../images/image/a4.png',
19 imginfo: '生活兴趣',
20 imgto: '/pages/interest/interest'
21 }
22 ]</pre>
</div>
.json,引入vant组件
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_412e8eec-656b-4a8f-a7f9-56d803c82713" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_412e8eec-656b-4a8f-a7f9-56d803c82713" class="cnblogs_code_hide">
<pre>1 "usingComponents": {
2 "van-grid": "@vant/weapp/grid/index",
3 "van-grid-item": "@vant/weapp/grid-item/index"
4 }</pre>
</div>
View Code</div>
效果图
<img alt="" data-src="https://img2020.cnblogs.com/blog/1087111/202003/1087111-20200324135941365-1986618852.png">
  
来源：https://www.cnblogs.com/kuhang/p/12558697.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发--网格布局