微信小程序使用.wxs在.wxml中分割字符串渲染多条数据

在开发微信小程序的项目中，由于接口中有一个字段的值以符号作为分隔，存放了多个value需要在前端展示（例如下图中的good_field字段）。

需求效果图

首先这是一个循环渲染出来列表，我无法在这整个循环中再去循环另一个数组渲染（主要是我不知道这样怎么写哈哈哈），所以我才用wxs模块来给整个列表中的数据中每一条数据单独循环渲染。上代码
wxs：

// magic.wxs
var split = function (tag) {if(tag){var a = tag.split(".");//我这里请求到的数据是以'.'分隔的，需要根据业务需求改成你自己的分隔符return a;}else{return}
}
module.exports = {split: split,
}

wxml：

<wxs src="./magic.wxs" module="magic"/> //注意：首先要在使用的页面引入wxs模块
<view class='box-wrap'><view wx:for="{{list}}" wx:key='index'><block><view class="box" bindtap="goPage" data-name="{{item.name}}"><image class="headerImg" src='{{item.head_portrait}}' /><view class="right"><view class="header"><text class="text1">{{item.name}}</text></view><view class="content1"><view class="text2">{{item.level_title}}</view><view class="text3">{{item.professional_certificate}}</view></view><view class="content2">  <!-- 重点在这里哦 --><block wx:for="{{magic.split(item.good_field)}}" wx:key="index" wx:if="{{index<3}}"> <!-- 我这里控制了最多显示三个 --><view>{{item}}</view></block></view></view></view></block></view>
</view>

wxss:

.box-wrap .box{width:663rpx;height:170rpx;display: flex;margin:30rpx auto 0;padding:16rpx 0;box-sizing: border-box;
}
.box-wrap .box .headerImg{width:112rpx;min-width:112rpx;height:112rpx;border-radius: 50%;margin-right:30rpx;background:#d7d7d7;
}
.box-wrap .box .right{flex: 1;
}
.box-wrap .box .right .header{display: flex;
}
.box-wrap .box .right .header .text1{font-weight: 500;font-size: 32rpx;margin-right:24rpx;line-height:45rpx;
}
.box-wrap .box .right .content1{display: flex;width:100%;flex-wrap: nowrap;font-size: 35rpx;line-height: 120rpx;color:#767575;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;-webkit-line-clamp:1;
}
.box-wrap .box .right .content1 .text2{font-size: 24rpx;line-height:37rpx;margin-top:15rpx;margin-right:20rpx;color:#969799;min-width:65rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;-webkit-line-clamp:1;word-break:break-all;
}
.box-wrap .box .right .content1 .text3{font-size: 24rpx;line-height:37rpx;margin-top:15rpx;margin-right:36rpx;color:#969799;max-width:400rpx;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;-webkit-line-clamp:1;word-break:break-all;
}
.box-wrap .box .right .content2{display: flex;margin-top:10rpx;
}
.box-wrap .box .right .content2 view{min-width:70rpx;height:42rpx;font-size: 24rpx;line-height: 42rpx;text-align: center;background:rgba(65,130,250,0.1);color:#4182FA;margin-right:19rpx;padding:0rpx 14rpx;box-sizing: border-box;border-radius: 20rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}

有兴趣的小伙伴可以看看关于wxs的官方文档
如有不对请大佬们指出，感谢

微信小程序使用.wxs在.wxml中分割字符串渲染多条数据相关推荐

微信小程序-（js和wxml中）utils公共方法使用
通过开发者工具快速创建了一个 QuickStart 项目时,会生成一个utils/util.js文件. util.js const formatTime = date => {const yea ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
微信小程序更新二维数组中的对象或数组的属性值
微信小程序更新二维数组中的对象或数组的属性值,这里可能有两种情况 1.微信小程序更新二维数组中的对象的属性值更新二维数组中的某个对象的属性值,代码如下 js 代码 data: {familys:[{ ...
微信小程序js数组初始化_微信小程序开发之改变data中数组或对象的某一属性值...
前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: {{item.we ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
区分微信小程序版本（开发工具中、开发版、体验版、正式版）的方法？
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
微信小程序全局配置文件app.json中window:backgroundColor“不生效”
那些年我们一起踩过的坑~ 今天说一下微信小程序全局配置文件app.json中window的backgroundColor属性,设置之后发现没效果. 查了资料发现原来这个backgroundColor属 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
【原创】微信小程序云开发通过input输入框动态修改云数据库的数据
[原创]微信小程序云开发通过input输入框动态修改云数据库的数据效果: 可以在小程序的显示界面中,渲染出数据库的相关内容,并且可以在显示界面中,直接修改数据库中的数据. 初始状态图: 点击获取数据 ...

微信小程序使用.wxs在.wxml中分割字符串渲染多条数据

微信小程序使用.wxs在.wxml中分割字符串渲染多条数据相关推荐

最新文章

热门文章

微信小程序 使用.wxs在.wxml中分割字符串渲染多条数据

微信小程序 使用.wxs在.wxml中分割字符串渲染多条数据相关推荐

最新文章

热门文章

微信小程序使用.wxs在.wxml中分割字符串渲染多条数据

微信小程序使用.wxs在.wxml中分割字符串渲染多条数据相关推荐