流风回雪927 2022-02-09 16:44 采纳率: 100%
浏览 84
已结题

微信小程序“我的”页面的开发

问题遇到的现象和发生背景

img

问题相关代码,请勿粘贴截图
wxml
<view class="userItemList"> 
  <navigator url="/pages/my/collection/collection">
        <image src="cloud://ac-project-6g67t2s1787ec30f.6163-ac-project-6g67t2s1787ec30f-1309467775/图标库/推荐.svg"></image><text>我的收藏</text>
    </navigator>
</view>
<view class= "arrow"></view>

wxss
.userItemList image{
    width: 80rpx;
    border-radius: 50%;
}
.userItemList{
    display: flex;
    flex-direction: row;
    height: 20rpx;
}
.arrow{
    width: 16rpx;
    height: 16rpx;
    border-top: 4rpx solid #999;
    border-right: 4rpx solid #999;
    transform: rotate(45deg);
    position: absolute;
    right: 30rpx;
    top: 38rpx;
运行结果及报错内容

运行正常,但图片和文字严重错位,后面的箭头也显示不出来

我的解答思路和尝试过的方法

通过修改wxss的配置让图片,文字和箭头水平对齐,但我怎么改就是对不齐

我想要达到的结果

像数字故宫的“我的”页面这样

img

  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-02-09 17:06
    关注
    
    wxml
    <view class="userItemList"> 
      <navigator class="userItemListLink" url="/pages/my/collection/collection">
            <image src="cloud://ac-project-6g67t2s1787ec30f.6163-ac-project-6g67t2s1787ec30f-1309467775/图标库/推荐.svg"></image><text>我的收藏</text>
        </navigator>
    </view>
    <view class= "arrow"></view>
     
    wxss
    .userItemListLink{
       display:flex
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 请回答用户的提问 2月11日
  • 已采纳回答 2月10日
  • 创建了问题 2月9日

悬赏问题

  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数,无法执行二选一查询
  • ¥15 液位控制,当液位超过高限时常开触点59闭合,直到液位低于低限时,断开
  • ¥15 marlin编译错误,如何解决?
  • ¥15 有偿四位数,节约算法和扫描算法
  • ¥15 VUE项目怎么运行,系统打不开
  • ¥50 pointpillars等目标检测算法怎么融合注意力机制
  • ¥20 Vs code Mac系统 PHP Debug调试环境配置
  • ¥60 大一项目课,微信小程序
  • ¥15 求视频摘要youtube和ovp数据集