微信小程序列表项的右侧带箭头怎么做？

璞~

已于 2022-07-06 15:07:06 修改

阅读量2.6w

点赞数 17

CC 4.0 BY-SA版权

分类专栏：微信小程序微信小程序开发笔记文章标签：微信小程序前端 javascript

于 2018-11-20 10:26:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39702981/article/details/84286228

微信小程序同时被 2 个专栏收录

86 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

微信小程序开发笔记

28 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在微信小程序中创建一个列表项，其右侧带有箭头的实现方法。通过在.wxml文件中添加<view class='arrow'/>标签，并在.wxss文件中进行样式设置来完成。

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站

在.wxml文件中新增一个标签<view class='arrow'/>

<view class='list'>

<view class='list1'>

<image src='../../images/list.jpg'></image>

<text>我的发布</text>

<view class='arrow'></view>

</view>

</view>

然后在.wxss中修饰

.arrow{

width: 10px;

height: 10px;

border-top: 2px solid #999;

border-right: 2px solid #999;

position: absolute;

right: 20rpx;

transform: rotate(45deg);

margin-top:10rpx;

}