技术小白之微信小程序的图片加文字链接
在多彩的图片呈现下的程序必不可缺的便是文字的搭配,图片勾起兴趣,文字辅助表达,多数情况下我们上传的图片都需要在它周围添上合适的标题,以便美观和表述清晰。下面是简单的图片文字链接的截图:
说到图片和文字的链接就不得不理下思路:首先我想要在小程序内显示图片文字信息,且在点击目标图片或文字时,可以转到我希望到达的另一个目标页面,这就表示我们需要在图片和文字外围用navigator将它们包裹住,其次如上述图片一样,希望文字位于图片下方,那么就要将包裹图片的image先写出来,再写入包裹文字的text或view,
wxml代码如下:
<navigator url='/pages/xqzjz/xqzjz' hover-class="changestyle" class='lianjie' ><image src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0e1e43e6888ba61edfeecf29790ff037/b3fb43166d224f4a9f8f363f03f790529822d18c.jpg' class='tp'></image><view class='ziti'>相亲终结者</view>
</navigator>
上述是一张图片和文字的链接,如需要在一行内填入多张图片,则只需将上述的图片和链接的地址和文字改改,复制在上述代码的下行就可以了,规定在同行显示用wxss来控制,
如下wxss代码:
.lianjie{width: 32.8%; //给你的链接加入限定的宽,这里用%是因为希望它能等比例适应大小height: 185px; //给链接加入高,这个高是图片的高加文字的高display: inline-block; //这个很重要,没了这个你的图片就会排队,排一溜下去~background-color: #d8f1ca; //给你的链接宽设置背景颜色,使它美观点margin-left: 0.2%; //希望链接屏幕的左边有点间隙
}.tp{width:100%; //在被链接包围下,需要100%的宽度显示你的图片height: 150px; //不要超过链接框的高度margin-top:2px; //让图片和链接框有点距离border: 1px solid rgb(250, 250, 250); //图片外围加上边框,使图片们之间有点间隔}.ziti{
font-size: 12px; //字体大小设置
height: 20px; //设置字体所在位置高度
text-align: center; //字体水平居中
line-height: 20px; //字体垂直居中
}
具体wxml代码如下:
<view class='kuang '>
<navigator url='/pages/xqzjz/xqzjz' hover-class="changestyle" class='lianjie' ><image src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0e1e43e6888ba61edfeecf29790ff037/b3fb43166d224f4a9f8f363f03f790529822d18c.jpg' class='tp'></image><view class='ziti'>相亲终结者</view>
</navigator><navigator url='/pages/shixiong/shixiong' hover-class='changestyle' class='lianjie'>
<image src='http://www.gugu5.com/upload2/16791/2017/10-09/20171009171642_765642wboqPi16_small.jpg' class='tp'></image>
<view class='ziti'>师兄,请按剧本来!</view>
</navigator><navigator url='/pages/xjc/xjc' hover-class='changestyle' class='lianjie'>
<image src='http://fm.234us.com/mh/2017/01/31/32f936d54f.jpg' class='tp'></image>
<view class='ziti'>邪君宠-貂蝉</view>
</navigator>
</view>
注:上述图片地址都是网络图片。而上述代码中的kuang是用来总体规划布局的,它的wxss如下:
.kuang{background-color: #d8f1ca;width: 100%;height: 185px;
}
代码和解释有写的不对的地方请见谅,可以的话请留下你宝贵的修改建议和问题提出,感谢~
技术小白之微信小程序的图片加文字链接相关推荐
- uni微信小程序 下载图片跟文字_微信小程序:图片与文字无法居中 最后解决的方法是——...
最近做小程序,需要用到flex布局,发现垂直居中是用:vertical-align:middle或者line-height 后来发现这2个都不能完全实现图片与文字居中,这可怎么办? 大图片 我给sta ...
- 微信小程序base64图片转换临时链接
小程序内新建 base64src.js const base64src = (base64data, fun) => {const base64 = base64data; //base64格式 ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
- 小白开发微信小程序20--web api文档制作
1.什么是Swagger Swagger 项目已于 2015 年捐赠给 OpenAPI 计划,自此它被称为 OpenAPI. 这两个名称可互换使用. 不过,"OpenAPI"指的是 ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序中base64转换成图片;uni-app小程序base64转图片;微信小程序base64文件转图片;微信小程序base64图片转图片
将微信小程序的图片转成base64 点击此链接看另一篇 以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (b ...
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...
- uniapp 微信小程序开发 图片上传压缩
uniapp 微信小程序开发 图片上传压缩 安卓上传图片并压缩 思路 全部代码 安卓上传图片并压缩 由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
- 微信小程序image图片预览时不显示(后缀问题!)
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
- Java实现微信小程序校验图片是否含有违法违规内容
文章目录 1.Java实现微信小程序校验图片是否含有违法违规内容(security.imgSecCheck) 2.接口文档简述 3.Java实现对接接口 4.压缩图片(Thumbnails) 5.整合 ...
最新文章
- SaltStack自动化运维(三)——Grains与Pillar组件
- KeyMob移动广告聚合平台给予开发者服务!
- Java Timer定时器 使用
- Java8 Time
- 2.1.2 Dropout正则化以及其他正则化
- 代码阅读 | torch.sort函数
- 数据“被”覆盖有假象,SQL数据库恢复终极绝招(数据恢复高级技术)
- natty的异步通信框架_OpenHub框架进行的异步通信
- 阿里P8架构师谈:MySQL慢查询优化、索引优化、以及表等优化总结
- content:\2b 是什么意义
- Pandas DataFrame loc []访问一组行和列
- RP产品原型资源分享-PRD文档
- HTML之如何创建表格?
- Seaborn绘图-绘制散点图,折线图-分类统计图
- 生活,平淡,些许沉思,些许感概
- Chips交互操作和集合论
- Linux打印添加水印,Linux 下给图片批量加水印
- Chromebook刷第三方bios
- 用jQuery--实现todolist待办事项清单
- Linux 搜过输入法通过命令切换主题
热门文章
- php 根据时间算年龄,PHP根据出生日期计算年龄的方法
- display:weston:desktop xdg-shell
- ws office excel 基础公式
- html怎么唤起虚拟键盘,电脑虚拟键盘怎么打开?电脑虚拟键盘打开五大方法介绍...
- VMware虚拟文件(.vmdk)瘦身(宿主为Windows)
- 如何在微信中直接下载APK
- 【已解决】U盘文件误删 恢复,实用有效 免费无充值 Recuva
- 2021-11-10全球货币市场基础知识系列3
- 软考:嵌入式系统设计师
- idea pull从远程库拉取最新代码