甜甜放学了 2022-08-09 23:34 采纳率: 61.9%
浏览 97
已结题

关于#javascript#的问题:做微信小程序

做微信小程序,下面四张分别是目前我的界面和代码:

img

img

img

img

我想把三个小图片都放在三行文字的前面,达到类似这样的效果:

img

请问要如何修改原来的代码?

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-08-10 09:35
    关注

    数据格式应该弄成json数组,文字名称和号码应该分开,打空格对齐数字和字母有些字宽不一样会无法对齐,看截图就知道了,image对象和文字放到同一个容器中,示例如下

    demo.wxml

    <view class="container">
      <view class="title">您可以通过以下方式联系我们</view>
      <view class="contact" wx:for="{{contacts}}" wx:key="item.value">
        <view class="text"><image src="{{item.img}}" alt="{{item.text}}"/>{{item.text}}</view>
        <view class="value">{{item.value}}</view>
      </view>
    </view>
    

    demo.js

    
    Page({
      data:{
        contacts:[
          {img:'/images/guding.png',text:'固定电话',value:'0769-89872562'},
          {img:'/images/yidong.png',text:'移动电话',value:'18676610251'},
          {img:'/images/youxiang.png',text:'邮箱',value:'2745536212@qq.com'},
        ]
      },
      onLoad(e){
      } 
    })
    

    demo.wxss

    
    .title{border-bottom: solid 1px #ccc;line-height:30px}
    .container{padding:10px 20px}
    .container .contact{display: flex;padding: 10px 0;line-height: 30px;}
    .container .contact:nth-child(2n+1){background:#f5f5f5}
    .container .contact .text{width:30%;display: flex;align-items: center;}
    .container .contact .text image{width:30px;height: 30px;margin-right: 2px;}
    .container .contact .value{flex:1}
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月18日
  • 已采纳回答 8月10日
  • 创建了问题 8月9日

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名