功能:兩種模式,圖片輪播和單列展示,可修改圖片和鏈接,可設置圖片高度和底邊距
切換本質:
圖片輪播模式使用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>