zoukankan      html  css  js  c++  java
  • 海报轮播实例

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

    切换本质:

    图片轮播模式使用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-->
                        <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>
                           <!--轮播模式:自动1/手动2-->
                           <condition type="==" left="$mk1_3" right="1" executionType="1" ><dataBinding><data name="autoScrollEnabled" value="true"/></dataBinding></condition>
                           <!--图片高度为空则默认648-->                
                           <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>
                           <!--内容模式,多图1,单图2隐藏-->
                           <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>
            <!-- 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">
                   <!--高度为空则默认450,有间距则设置间距,默认间距为0-->
                   <conditions>
                      <condition type="==" left="$mk1_4" right="null" executionType="1"><styleBinding height="450" /></condition>
                      <!--处理图片顶距,当前循环位置$_component_.listIndex不是第一则添加顶边距-->
                      <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>
    
    
    
    <!--空图层做边距,底部边距默认16-->
    <container>
        <layout type="linearLayout" />
        <styleBinding width="640" height="16"  marginTop="0"/>
        <!--值9,设置下边距为自定义下边距-->
        <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>
  • 相关阅读:
    关于JSON可能出现的错误,待更/todo
    mongoose的安装与使用(书签记录) 2017
    HTTP的学习记录3--HTTPS和HTTP
    HTTP的学习记录(二)头部
    HTTP(一)概述
    LeetCode 455. Assign Cookies
    LeetCode 453. Minimum Moves to Equal Array Elements
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 447. Number of Boomerangs
    LeetCode 416. Partition Equal Subset Sum
  • 原文地址:https://www.cnblogs.com/tinyphp/p/13931821.html
Copyright © 2011-2022 走看看