海報輪播實例

功能：兩種模式，圖片輪播和單列展示，可修改圖片和鏈接，可設(shè)置圖片高度和底邊距
切換本質(zhì)：
圖片輪播模式使用sliderView，在圖片輪播模式下，單列圖片的container將隱藏，
同理單列圖片模式下，圖片輪播的container將隱藏
<ui>
    <view>
        <container>
          <!-- 面板設(shè)置-->
          <editProperty>
              <dataDefines>
                  <!-- 內(nèi)容模式 -->
                  <dataDefine name="mk1_1" type="radio" description="內(nèi)容模式" propertyName="內(nèi)容模式" 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"/> 
                <!-- 高度設(shè) -->
                <dataDefine name="mk1_4" type="text" description="海報高度" contentSize="20" propertyName="海報高度[設(shè)置和圖片一樣高度]" isNull="true" />
                <!-- 圖片和鏈接設(shè)置 -->
                <dataDefine name="banner_array" type="jsonArray" min="1" isNull="true" 
                    max="10" propertyName="圖片設(shè)置">
                    <param name="mk_image" type="image" description="請輸入圖片url" isNull="true"
                        width="640"  propertyName="上傳圖片(寬640，高自定義)" />
                        <param name="mk_url" type="url" description="請輸入跳轉(zhuǎn)頁面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>
                       <!--內(nèi)容模式，多圖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，有間距則設(shè)置間距，默認間距為0-->
               <conditions>
                  <condition type="==" left="$mk1_4" right="null" executionType="1"><styleBinding height="450" /></condition>
                  <!--處理圖片頂距，當前循環(huán)位置$_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，設(shè)置下邊距為自定義下邊距-->
    <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>
posted @ 2020-11-05 15:13 tinyphp Views(229) Comments(0) 收藏舉報
刷新頁面返回頂部
tinyphp

發(fā)表是吸收的利器！胡適先生說的

海報輪播實例

公告
