E企盈营销工具技术服务商 热线:4006-838-530

技术小白之微信小程序的图片加文字链接

E企盈直播平台营销卖货系统

在多彩的图片呈现下的程序必不可缺的便是文字的搭配,图片勾起兴趣,文字辅助表达,多数情况下我们上传的图片都需要在它周围添上合适的标题,以便美观和表述清晰。下面是简单的图片文字链接的截图:说到图片和文字的链接就不得不理下思路:首先我想要在小程序内显示图片文字信息,且在点击目标图片或文字时,可以转到我希望到达的另一个目标页面,这就表示我们需要在图片和文字外围用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;}代码和解释有写的不对的地方请见谅,可以的话请留下你宝贵的修改建议和问题提出,感谢~

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 技术小白之微信小程序的图片加文字链接
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏