template-web.js

Posted 2020-12-05 今年我二十有七

1.<script src="/static/js/lib/template/template-web.js"></script>

2.<script>
    //按条件排序
    $(‘.screen-left a‘).click(function () {
        var sort = $(this).data(‘sort‘);
        $(this).addClass(‘active‘).siblings(‘a‘).removeClass(‘active‘);
        $.get("{:url(‘index/Goods/getGoods‘)}", {sort: sort}, function (result) {
            if (result.code === 1) {
                var result = template("goodsTemplate", result);
                $(‘.all-goods‘).html(result);
                //分页显示1
                kkpager.selectPage(1);
            }
        }, ‘json‘);
    })
</script>

3.<script type="text/html" id="goodsTemplate">
    {literal}
    {{if data}}
    {{each data}}
    <li>
        <div class="content-par">
            <a href="#" class="zs-img">
                <img src="{{$value.thumb_url[0]}}"  class="lazy-load">
            </a>
            <div class="samll-img">
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        {{each $value.thumb_url}}
                        <div class=‘swiper-slide {{if $index==0}}swiper-myactive{{/if}}‘><img
                                src=‘{{$value}}‘ alt=‘‘></div>
                        {{/each}}
                    </div>
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <i class="iconfont icon-icon_arrow_left prev"></i>
                <i class="iconfont icon-icon_arrow_right next"></i>

            </div>
            <div class="goods-serach-price"><sup>￥</sup><span>{{$value.marketprice}}</span></div>
            <a href="#" class="goods-serach-name">{{$value.title}}</a>
            <p class="goods-serach-comment"><a href="#">3700+</a>条评论</p>
            <span class="goods-source">{{$value.detail_shopname}}</span>
        </div>
    </li>
    {{/each}}
    {{else/}}
    找不到宝贝
    {{/if}}

    {/literal}
</script>

注：{literal} {/literal}是tp5标签，使代码不被tp5模板引擎解析