专栏首页算法与编程之美微信小程序|标签页内容完善

微信小程序|标签页内容完善

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

如何实现标签页下的页面完善?

如何将图文组合布局,添加搜索框,配置一个九宫格?

在我们浏览类似一个电影信息页面时,会遇到进行多个页面多种选择情况,每个标签栏都对应不同信息的情况,而其中图文组合布局、九宫格布局、以及搜索框都是必不可少的。

解决方案

基本步骤都是从在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 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|scroll-view组件

    小程序的视图容器组件分为五个组件,分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件,如图2.1。这里介绍sc...

    算法与编程之美
  • 微信小程序|宫格导航设计

    首先要熟悉小程序的开发流程:在js里提供数据,在wxml里绑定数据,在wxss里添加样式。

    算法与编程之美
  • ​数据库|传统的集合运算

    关系R和关系5具有相同的目n(即两个关系都有n个属性),且相应的属性取自同一个域,则关系R与关系S的并由属于R或属于S的元组组成,其结果关系仍为n目关系。

    算法与编程之美
  • 「小程序JAVA实战」小程序注册界面的开发(29)

    PS:这个就是简单的注册页面,其实很多元素我也抄的网上的,但是要理解这个设计的思路很理念,别搬砖都不知道去哪里找,那就尴尬了。

    IT故事会
  • 共享个地图控件的样式

    源代码下载地址:http://download.csdn.net/detail/gisshixisheng/9008937

    lzugis
  • 谁动了我的Token | TW洞见

    今日洞见 文章作者/配图来自ThoughtWorks:禚娴静。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网...

    ThoughtWorks
  • android-ramdisk.img分析、recovery.img&boot.img执行过程【转】

    ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统。对于传统的磁盘文件系统来说,这样做的好处是可以极大提...

    233333
  • 你在使用什么 Redis 客户端工具?

    今天发现一个不错的 Redis 客户端工具:AnotherRedisDesktopManager。

    dys
  • 路透社:美国打算限制英伟达等与中国人工智能界合作

    人工智能界的企业,很擅长其乐融融的合作。但在美国政府看来,这些合作关系一旦涉及中国企业,就可能变成了一种“威胁”。

    量子位
  • 关于翻转课堂(不时更新)

    Y大宽

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动