微信小程序--添加新属性，动态展开收起查看详情

最新推荐文章于 2023-06-13 16:20:25 发布

katrinazpc

最新推荐文章于 2023-06-13 16:20:25 发布

阅读量1.9w

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/Che_rish/article/details/78871158

版权

本文介绍如何在微信小程序中添加新属性，实现内容的动态展开和收起，以达到查看详情的效果。通过示例代码和最终展示的效果图，帮助开发者理解这一功能的实现过程。

摘要由CSDN通过智能技术生成

wxml部分：
    <view class="data-list">
        <view class="bg-white" wx:for="{
   { dataInfo }}" wx:key="item">
            <view class="data-info mt10 border-top-bottom op-active" data-idx="{
   { index }}" bindtap="expandDetail">
                <view class="op-flex-box">
                    <view class="left-box op-flex-box">
                        <span class="fb">采购子项号：{
   { item.subNum }}</span>
                        <span>{
   { item.grade }} / {
   { item.spec }} / {
   { item.weight }}吨</span>
                    </view>
                    <span class="op-down-arrow {
   { item.flag? 'active' : '' }}"></span>
                </view>
                <progress percent="{
   { item.percentage }}" backgroundColor="#eeeeee" activeColor="#ff6600" show-info active />
            </view>
            <!-- 展开 -->
            <view class="data-expand p10 border-bottom" wx:if="{
   { item.flag }}">
                <!-- 生产进度 -->
                <view class="data-progress mb10">
                    <view class="lh30 tc">生产进度</view>
                    <view class="data-table color-666 f24">
                        <view class="op-flex-box">
                            <span>
                                <image class="icon-product" src="{
   { productionIcon1 }}">