finclip开发分享——数据绑定_ifc 消息绑定-CSDN博客

本文链接：https://blog.csdn.net/m0_69824652/article/details/124456627

这篇博客介绍了FinClip的学习心得，重点探讨了数据绑定的实现，包括Mustache语法的应用，以及如何在组件属性和控制属性中进行数据绑定。同时，文章提到了在FinClip中进行简单运算的方法。

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

这是一篇finclip学习笔记。在学习一段时间finclip后，尝试实现一下finclip的数据绑定。

以下是finclip数据的原理：

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

<view class="store-choose-container" wx:if="{{loaded}}">
    <view class="store-choose-title font-title">选择室内外拍摄</view>
    <view class="store-choose-subtitle">我们将为您展示不同套系的拍摄风格</view>
    <view class="store-list">


        <view bindtap="itemTapHandler" class="store-item border-color-{{index}}" data-index="{{index}}" data-storeid="{{item.id}}" data-type="{{item.type}}" wx:for="{{items}}" wx:key="store" wx:if="{{item.id == 44146||item.id == 44147 }}">
            <view class="title">
                <view class="store-active-name {{item.location?'':'item-center'}}">{{item.name}}</view>
                <view class="store-active-info" wx:if="{{item.location}}">{{item.location}}</view>
            </view>
            <view class="subtitle {{item.icon_new?'has-icon-new':''}}">
                <view>{{item.key}}</view>
                <i class="icon-new" wx:if="{{item.icon_new}}"></i>
            </view>
        </view>
        
    </view>
</view>

组件属性(需要在双引号之内)

        <swiper autoplay="true" duration="400" indicatorDots="{{defaultBanners.length>1?true:false}}" interval="5000">
            <swiper-item wx:for="{{defaultBanners}}" wx:key="item">
                <image bindtap="gotoBannerLink" class="slide-image" data-link="{{item.linkUrl}}" lazyLoad="true" src="{{item.picUrl}}" style="width: 750rpx; height: 370rpx"></image>
            </swiper-item>
        </swiper>

控制属性(需要在双引号之内)

 <view class="order-already-pay" wx:if="{{order.state==='revoked'}}">
            <text>订单已取消</text>
            <view class="order-remind" wx:if="{{order.payment_state==='refund_issued'}}">
      退款处理中，通常在1-3个工作日内原路退回。
      </view>
            <view class="order-remind" wx:if="{{order.payment_state==='refund_settled'}}">
      退款已到账，请查收款项。
      </view>
        </view>
        <view class="order-already-pay" wx:if="{{order.state==='closed'}}">
            <text>订单已关闭</text>
        </view>
        <view class="order-already-pay" wx:if="{{order.state==='finished'}}">
            <text>订单服务完毕</text>
        </view>

运算

可以在 {{}} 内进行简单的运算：

<form bindreset="formReset" bindsubmit="onSubmit" reportSubmit="true">
        <view class="button-bottom {{isIpx?'fix-iphonex-button':''}}">
            <button class="button {{aggreed?'':'button-disabled'}}" disabled="{{!aggreed}}" formType="submit">支付定金</button>
        </view>
    </form>