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

最新推荐文章于 2024-07-18 14:00:00 发布

腰果虾仁

最新推荐文章于 2024-07-18 14:00:00 发布

阅读量2.1k

点赞数

分类专栏：微信小程序文章标签： javascript 前端 css html5

本文链接：https://blog.youkuaiyun.com/weixin_42584321/article/details/105488017

版权

在微信小程序开发中遇到接口返回的字段以特定符号分隔多个值，为实现将这些值分别渲染到列表，使用.wxs模块进行字符串分割，并在.wxml中循环展示。通过.wxs处理数据，避免了在模板中嵌套循环的复杂性。代码示例展示了如何结合.wxml和.wxss完成这一需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发微信小程序的项目中，由于接口中有一个字段的值以符号作为分隔，存放了多个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.he