微信小程序图片右边加两行文字的代码

2024-12-02 12:13:44

图片右边加两行文字

先来一个效果图：

下面来看代码

wxml

<view class="view_tupian_wenzi">
  <image class="image_1" src="../images/main_yewu.png" />
  <view class="view_wenzi2">
  <text>服务项目</text>
  <text class="text_small">进入服务项目，查看项目数据</text>
  </view>
 </view>

wxss代码

.view_tupian_wenzi {
 display: flex;
 flex-direction: row;
 margin-left: 10px
}
.image_1 {
 width: 50px;
 height: 50px;
}
.view_wenzi2 {
 width: 90px;
 margin-left: 5px;
 display: flex;
 flex-direction: column;
}
.text_small{
 font-size: 27rpx;
 word-break:break-all;
 color: #7a7878
}

ps：下面接着看下如何实现图片和两行文字在一行显示

给你个例子- -

html

 <div class="wrap">
  <img src="images/ico.png" alt="">
  <span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span>
 </div>

css

.wrap {
/* 可无需设置高度，靠图片高度 或者 文字的上下padding撑开高度 */
 border: 1px solid;
 width: 600px;
 text-align: center;
}
.wrap span{
 display: inline-block;
 vertical-align: middle;
 padding: 20px 0; /* 撑开高度 */
}
.wrap img{
 width: 10px;
 height: auto;
 vertical-align: middle;
}

其实多行居中分很多情况的- -只有行内元素，只有行内替换元素，行内与行内替换混合，建议去好好看看vertical-align与基线相关资料。

就楼主这个需求，还有其他更容易的实现方式，比如：

1、flex弹性盒子（移动端）

2、使用表格布局

到此这篇关于微信小程序图片右边加两行文字的代码的文章就介绍到这了,更多相关微信小程序文字在图片右边内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序利用Canvas绘制图片和竖排文字详解

前言闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图.竖排的武将姓名.以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台.合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下. 正文首先放一张最终保存到相册的图片吧~ 自我感觉良好,至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧. 整个图片分为三个部分: 武将图片小程序码武将文字信息先来看一下 wxml 里面的代码
微信小程序图片右边加两行文字的代码

图片右边加两行文字先来一个效果图: 下面来看代码 wxml <view class="view_tupian_wenzi"> <image class="image_1" src="../images/main_yewu.png" /> <view class="view_wenzi2"> <text>服务项目</text> <text class="
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

由于微信小程序没有提供类似 Image 这样的 JS 对象,要实现图片的预加载要麻烦一些, wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能. 使用 1.下载 wxapp-img-loader项目源代码(https://github.com/o2team/wxa...),将 img-loader 目录拷贝到你的项目中 2.在页面的 WXML 文件中添加以下代码,将组件模板引入 <import src="../../img-loader/img-loader.w
微信小程序实现滚动加载更多的代码

1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个 4.滚动到底部绑定需要触发的事件 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='
小程序图片剪裁加旋转的示例代码

一个微信小程序图片剪裁组件,可以通过手势控制旋转缩放移动,也可以点击旋转进行90度旋转,先看下效果(视屏不知道为啥用不了,上个压缩过度的GIF先): 图片剪裁毫无疑问用的是canvas,但是开发过小程序的同学应该了解小程序canvas的一些坑.比如小程序canvas的设定了画布的大小后不能像web的canvas那样通过css样式来调整画布在手机上显示的大小.还有canvas不能设置太大因为可能会在某些安卓机上导致小程序崩溃.canvas绘制过大的图片会让小程序变得非常卡顿等等. 网上能找到的图片
微信小程序动态的加载数据实例代码

微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1.首先要写在js里定义一个全局变量 data: { datalist: [] }, 2.请求数据加载,获得整个数组信息 wx.request({ url: httpUrl, data: {}, success: function (res) { that.setData({ datalist: res.data.courses }) }, 3.在.wxml中调用数组的调用用:wx:for="{{datalist}}"
微信小程序图片宽度自适应的实现

微信小程序图片宽度自适应的实现实例代码: wxml 代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="image&
微信小程序图片轮播组件gallery slider使用方法详解

本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo
微信小程序图片加载失败时替换为默认图片的方法

先看一下效果图: 1.第一种情况:单独加载一个图片 index.wxml代码: <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image> index.js代码: errorFunction: function(){ this.setData({ avatar: '/image/default.png' }) } 2.
微信小程序图片横向左右滑动案例

本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下图片左右滑动效果图: wxml代码: <scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true"> <view class="upload_Item"> <image class="upload_Item_img&q
微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名类型默认值说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

微信小程序图片右边加两行文字的代码

相关推荐

随机推荐