海报轮播实例

功能:两种模式,图片轮播和单列展示,可修改图片和链接,可设置图片高度和底边距

切换本质:

图片轮播模式使用sliderView,在图片轮播模式下,单列图片的container将隐藏,

同理单列图片模式下,图片轮播的container将隐藏

<ui>
    <view>
        <container>

          <editProperty>
              <dataDefines>

                  <dataDefine name="mk1_1" type="radio" description="内容模式" propertyName="内容模式" isNull="true">
                    <config type="sync">
                        <data text="图片轮播" value="1" defaultSelect="true" />
                        <data text="单列图片" value="2" defaultSelect="false" />
                    config>
                dataDefine>

                <dataDefine name="mk1_3" type="radio" description="轮播方式" propertyName="轮播方式" isNull="true"  refer="mk1_1:1">
                    <config type="sync">
                        <data text="自动轮播" value="1" defaultSelect="true" />
                        <data text="手指滑动" value="2" defaultSelect="false" />
                    config>
                dataDefine>

                <dataDefine name="mk1_2" type="radio" description="底部圆点显示隐藏" propertyName="底部圆点显示隐藏" isNull="true" refer="mk1_1:1">
                    <config type="sync">
                        <data text="显示" value="1" defaultSelect="true" />
                        <data text="隐藏" value="0" defaultSelect="false" />
                    config>
                dataDefine>
                <dataDefine name="mk1_5" type="text" propertyName="单列图片间距(默认:0)" contentSize="10" isNull="true" refer="mk1_1:2"/>

                <dataDefine name="mk1_4" type="text" description="海报高度" contentSize="20" propertyName="海报高度[设置和图片一样高度]" isNull="true" />

                <dataDefine name="banner_array" type="jsonArray" min="1" isNull="true"
                    max="10" propertyName="图片设置">
                    <param name="mk_image" type="image" description="请输入图片url" isNull="true"
                        width="640"  propertyName="上传图片(宽640,高自定义)" />
                        <param name="mk_url" type="url" description="请输入跳转页面url"
                            validateType="taokeurl||wirelessurl" isNull="true" propertyName="链接" />
                        dataDefine>

                        <dataDefine name="mk1_End_height" type="select"  description="边距" propertyName="模块下边距" isNull="true">
                            <config type="sync">
                                <data text="8" value="8" defaultSelect="false" />
                                <data text="16" value="16" defaultSelect="true" />
                                <data text="24" value="24" defaultSelect="false" />
                                <data text="32" value="32" defaultSelect="false" />
                                <data text="40" value="40" defaultSelect="false" />
                                <data text="48" value="48" defaultSelect="false" />
                                <data text="56" value="56" defaultSelect="false" />
                                <data text="自定义下边距" value="1" defaultSelect="false" />
                                <data text="无" value="0" defaultSelect="false" />
                            config>
                        dataDefine>

                        <dataDefine name="mk1_End_diy_height" type="text" description="自定义下边距高度" propertyName="下边距高度" contentSize="6" isNull="true" refer="mk1_End_height:1"/>
                    dataDefines>
                editProperty>

                <subViews>

                    <sliderView>
                        <dataBinding>
                         <data name="autoScrollEnabled" value="false"/>
                         <data name="userTrack" type="json">
                             {
                             "wp_app":"weapp",
                             "wp_pk":"$wp_pk",
                             "wp_m":"MODULE_KEY_PLACE_HOLDER"
                             }
                         data>
                     dataBinding>
                     <styleBinding>
                        <attribute name="height" value="$mk1_4"/>
                        <attribute name="width" value="640"/>
                        <attribute name="borderWidth" value="0"/>
                        <attribute name="isPointHide" value="false"/>
                    styleBinding>

                    <conditions>

                       <condition type="==" left="$mk1_3" right="1" executionType="1" ><dataBinding><data name="autoScrollEnabled" value="true"/>dataBinding>condition>

                       <condition type="==" left="$mk1_4" right="null" executionType="1"><styleBinding height="648" />condition>

                       <condition type="==" left="$mk1_2" right="0" executionType="1"><styleBinding isPointHide="true" />condition>

                       <condition type="==" left="$mk1_1" right="2" executionType="1"><styleBinding invisible="true" width="0" height="0" />condition>
                   conditions>

                   <foreach start="0" step="1" >
                    <array value="$banner_array"/>
                    <template>
                     <image url="$banner_array.[?].mk_image">
                        <styleBinding>
                            <attribute name="height" value="360"/>
                            <attribute name="width" value="640"/>
                        styleBinding>
                        <events>
                            <event type="click">
                                <actions>
                                    <userTrack utType="Image" utName="image">
                                        <utParams>
                                            <params>
                                                <param name="wp_app" value="weapp" />
                                                <param name="wp_pk" value="$wp_pk" />
                                                <param name="wp_m" value="MODULE_KEY_PLACE_HOLDER" />
                                            params>
                                        utParams>
                                    userTrack>
                                    <openURL   url="$banner_array.[?].mk_url">
                                        <params>
                                            <param name="wp_app" value="weapp" />
                                            <param name="wp_pk" value="$wp_pk" />
                                            <param name="wp_m" value="MODULE_KEY_PLACE_HOLDER" />
                                        params>
                                    openURL>
                                actions>
                            event>
                        events>
                    image>
                template>
            foreach>

        sliderView>

        <container>
          <styleBinding width="640" height="$mk1_4" marginTop="0" />
          <conditions>
              <condition type="==" left="$mk1_1" right="1"><styleBinding invisible="true" width="0" height="0" />condition>
          conditions>
          <foreach start="0" step="1" >
            <array value="$banner_array"/>
            <template>
             <image url="$banner_array.[?].mk_image">

               <conditions>
                  <condition type="==" left="$mk1_4" right="null" executionType="1"><styleBinding height="450" />condition>

                  <andCondition>
                      <condition type="!=" left="$mk1_5" right="null"  />
                      <condition type="!=" left="$_component_.listIndex" right="1" />
                      <styleBinding marginTop="$mk1_5" />
                  andCondition>
              conditions>
              <events>
                <event type="click">
                    <actions>
                        <userTrack utType="Image" utName="image">
                            <utParams>
                                <params>
                                    <param name="wp_app" value="weapp" />
                                    <param name="wp_pk" value="$wp_pk" />
                                    <param name="wp_m" value="MODULE_KEY_PLACE_HOLDER" />
                                    <param name="wp_p" value="$banner_array.[?].nid" />
                                params>
                            utParams>
                        userTrack>
                        <openURL   url="$banner_array.[?].mk_url">
                            <params>
                                <param name="wp_app" value="weapp" />
                                <param name="wp_pk" value="$wp_pk" />
                                <param name="wp_m" value="MODULE_KEY_PLACE_HOLDER" />
                                <param name="wp_p" value="$banner_array.[?].nid" />
                            params>
                        openURL>
                    actions>
                event>
            events>
        image>
    template>
foreach>
container>

<container>
    <layout type="linearLayout" />
    <styleBinding width="640" height="16"  marginTop="0"/>

    <conditions>
        <andCondition executionType="1">
          <condition type="==" left="$mk1_End_height" right="1"/>
          <condition type="!=" left="$mk1_End_diy_height" right="null"/>
          <styleBinding height="$mk1_End_diy_height" />
      andCondition>
      <condition type="==" left="$mk1_End_height" right="8" executionType="1"><styleBinding height="8" />condition>
      <condition type="==" left="$mk1_End_height" right="24" executionType="1"><styleBinding height="24" />condition>
      <condition type="==" left="$mk1_End_height" right="32" executionType="1"><styleBinding height="32" />condition>
      <condition type="==" left="$mk1_End_height" right="40" executionType="1"><styleBinding height="40" />condition>
      <condition type="==" left="$mk1_End_height" right="48" executionType="1"><styleBinding height="48" />condition>
      <condition type="==" left="$mk1_End_height" right="56" executionType="1"><styleBinding height="56" />condition>
      <condition type="==" left="$mk1_End_height" right="0" executionType="1"><styleBinding height="0" />condition>
  conditions>

container>

subViews>
container>
view>
ui>

Original: https://www.cnblogs.com/tinyphp/p/13931821.html
Author: tinyphp
Title: 海报轮播实例

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/553717/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 七、注释、标识符、数据类型与类型转换

    书写注释是一个好习惯 public class Comment { public static void main(String[] args) { //&#x5355;&…

    技术杂谈 2023年6月21日
    085
  • Game Engine Architecture 4

    【 Game Engine Architecture 4】 1、a model of multiple semi-independent flows of control simp…

    技术杂谈 2023年5月31日
    090
  • [学习笔记]日期和时间

    日期(Date)和时间(Time)是计算机可以处理的重要数据; 日期代表日历中的某一天,由年/月/日组成,被看作是离散的数据; 时间代表某个时间点,由时/分/秒组成; 本地时间 我…

    技术杂谈 2023年7月24日
    066
  • 英特尔® VTune™ Profiler 用户指南——程序性能异常检测分析

    https://www.intel.com/content/www/us/en/develop/documentation/vtune-help/top/analyze-perfo…

    技术杂谈 2023年5月31日
    0114
  • 8086汇编 Loop 指令

    8086汇编 Loop 指令 功能:实现循环(计数型循环) 指令的格式 loop 标号 CPU 执行loop指令时要进行的操作: (cx)=(cx)-1; 判断cx中的值不为零则转…

    技术杂谈 2023年6月1日
    096
  • Java注解与原理分析

    一、注解基础 二、注解原理 三、常用注解 1、JDK注解 2、Lombok注解 四、自定义注解 1、同步控制 2、类型引擎 五、参考源码 使用的太多,被忽略的理所当然; 一、注解基…

    技术杂谈 2023年7月24日
    077
  • SeataServer1.5.2源码学习

    Seata 包括 Server端和Client端。Seata中有三种角色:TC、TM、RM,其中,Server端就是TC,TM和RM属Client端。Client端的源码学习上一篇…

    技术杂谈 2023年7月24日
    065
  • jd-gui反编译报错// INTERNAL ERROR //

    最近在反编译class和jar包的时候,发现部分class无法反编译出来,换了最新版本的jd-gui和多个版本都不行,只能放弃了 解决方案:GitHub上找Luyten这个工具反编…

    技术杂谈 2023年5月31日
    088
  • 一些常用的 std 类型

    【 std::allocator】 标准库中包含一个名为allocator的类,允许我们将分配和初始化分离。使用allocator通常会提供更好的性能和更灵活的内存管理能力。 标准…

    技术杂谈 2023年5月31日
    0102
  • WORD模板使用

    Date: 2012-12-03 13:05:55 中国标准时间 Author: csophys Org version 7.8.11 with Emacs version 24V…

    技术杂谈 2023年7月25日
    076
  • Jupyter Notebook 对虚拟环境的访问

    本文写作时间:2021 年 5 月 Jupyter Notebook 默认并不支持 Conda,无法访问虚拟环境中的资源,自然也无法切换不同的虚拟环境运行笔记。通过插件 nb_co…

    技术杂谈 2023年7月11日
    074
  • ThreadLocal类的一个小应用

    先前使用多线程模拟体检科室体检,但是循环使用的是while(true),一直在思考加一个线程去判断是否完成体检,然后终止这些死循环,后来发现这种idea显然绕远了。现在借助Thre…

    技术杂谈 2023年7月24日
    058
  • Git的常见命令

    Git 一、git环境安装 1.初始化本地仓库: git init 2.将本地仓库跟远程仓库建立连接:git remote add name path ​ git clone pa…

    技术杂谈 2023年7月24日
    076
  • C#实现一个万物皆可排序的队列

    产品中需要向不同的客户推送数据,原来的实现是每条数据产生后就立即向客户推送数据,走的的是HTTP协议。因为每条数据都比较小,而数据生成的频次也比较高,这就会频繁的建立HTTP连接,…

    技术杂谈 2023年7月10日
    055
  • 千古前端图文教程-HTML009- HTML5详解2

    HTML5详解2 HTML5详解2 本文主要内容 #拖拽 #1、拖拽元素 2、目标元素 历史 #地理定位 #获取地理信息的方式 #1、IP地址 #2、三维坐标: #3、用户自定义数…

    技术杂谈 2023年7月11日
    093
  • HIT软构博客6-设计模式

    设计模式可以分为1.创建型模式 2.结构型模式 3.行为类模式 1.创建型模式 ​ 工厂方法模式 ​ 当client不知道要创建哪个类的具体实例或不想在客户端代码指明要创建具体哪个…

    技术杂谈 2023年7月11日
    072
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球