微信小程序|标签页内容完善
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
如何实现标签页下的页面完善？
如何将图文组合布局，添加搜索框，配置一个九宫格？
在我们浏览类似一个电影信息页面时，会遇到进行多个页面多种选择情况，每个标签栏都对应不同信息的情况，而其中图文组合布局、九宫格布局、以及搜索框都是必不可少的。
解决方案
基本步骤都是从在json里引入Vant Weapp里的组件开始。
（1）图文组合
图文组合时，要让左边是图，右边是文字描述，需要将图片image标签和文字标签（注：此时使用view标签）放进同一个view标签里面进行配置。
表3.1.1 wxml代码示例
<van-tab title="正在热映">
<view>电影列表</view>
<view>
<image src="/pages/image/timg.jpg"></image>
<view>电影1:相关描述</view>
</view>
<view>
<image src="/pages/image/timg.jpg"></image>
<view>电影2：相关描述</view>
</view>
<view>
<image src="/pages/image/timg.jpg"></image>
<view>电影3：相关描述</view>
</view>
</van-tab>表3.1.2 wxss代码示例
.p1{
margin: 5px 10px;
height: 80px;
width: 80px;
}
.t1{
margin-right: 220rpx;
margin-top: 80rpx;
float: right
}
.p2{
margin: 5px 10px;
height: 80px;
width: 80px;
}
.t2{
margin-right: 200rpx;
margin-top: 80rpx;
float: right
}
图3.1.1 电影列表效果图
（2）搜索框
引入一个van-search标签来实现。
表3.2.1 搜索框代码
<van-search value="{{ value }}" placeholder="请输入搜索关键词" />
图3.2.1 搜索页效果图
（3）九宫格
添加九宫格有两种方式：第一是通过写多个van-grid-item标签来实现（默认一行四个格子）；第二是直接自定义列和行的数量，通过改变column-num=" "，内数字来定义列数，改变wx:for="{{ }}"内数字来定义格子数量。
表3.3.1 方式一代码
<van-grid>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid> 表3.3.2方式二代码
<van-grid column-num="3">
<van-grid-item icon="video-o" text="文字" wx:for="{{ 9 }}" />
</van-grid> 
图3.3.1 分类标签页效果图
结语
（1）在配置电影列表页内容时，需要让放入文字内容的view标签进行一个浮动属性float-right来设置位置。
（2）在配置分类页时，可以自己设置不同的列数以及添加格子的数量。
END
实习编辑 | 王楠岚
责 编 | 吴怡辰
where2go 团队
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-01-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
