小程序wxml管道

用过Angular的都知道管道的概念。

管道就是数据的转变,例如某个选项的value是A,对应文本显示为车票预订,如何在wxml页面上将A转化为车票预订?

一、新建wxs文件

function cgAnpai(str) {
  if(!str||str.length==0){
    return '';
  }
  return str.replace('A', '车票预订').replace('B', '机票预订').replace('C', '已购票').replace('D', '自驾');
}
module.exports.cgAnpai = cgAnpai;

二、引入wxs

在需要使用管道的wxml头部引入wxs文件

<wxs src="../../utils/changetxt.wxs" module="tools" />

src里填文件路径

三、使用

在wxml里使用

{{tools.cgAnpai(item.traffic_type.value)}}

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
购物车小程序主要由wxml、wxss和js文件组成。wxml小程序的模板文件,用于构建页面结构;wxss是样式文件,用于定义页面样式;js文件用于处理页面逻辑和交互。 购物车小程序的wxml代码通常包括页面结构和数据绑定。页面结构包括头部、商品列表、底部结算栏等部分。数据绑定则用于将后台传递的数据渲染到页面上,比如商品信息、数量、价格等。 一个购物车小程序的wxml代码示例可能如下: ```html <!-- pages/cart/cart.wxml --> <view class="cart"> <view class="cart-header"> 购物车 </view> <view class="cart-list"> <block wx:for="{{cartList}}" wx:for-item="item" wx:for-index="index"> <view class="cart-item"> <image src="{{item.image}}" class="item-image"></image> <view class="item-info"> <text class="item-name">{{item.name}}</text> <text class="item-price">¥ {{item.price}}</text> <text class="item-quantity">x {{item.quantity}}</text> </view> </view> </block> </view> <view class="cart-footer"> <view>合计:¥ {{totalPrice}}</view> <button bindtap="checkout">去结算</button> </view> </view> ``` 上述代码中,使用了<view>、<text>、<image>等组件构建页面结构,通过wx:for指令遍历渲染购物车商品列表,绑定了数据{{cartList}}和{{totalPrice}}。另外,还绑定了一个按钮的点击事件checkout,用于处理结算逻辑。 购物车小程序的wxml代码通常根据具体需求进行定制,上述代码仅为简单示例,实际开发中可能会更加复杂。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猴子学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值