uni-app开发(7)---兼容多类型DOM结构组件封装

痛定思痛。 2021-08-02 17:28 162阅读 0赞

在页面列表结构中，公共组件可以封装使用。但是，公共组件中类型可能有很多种，比如：文本、图文、视频、分享等等不同类型，我们在进行公共组件开发的时候，没有必要根据类型封装多个组件，我们只需要封装一个组件，其中根据不同类型使用多个template根据类型编译即可。

代码结构如下：

<view class="u-f-ajc">
    	
    	<template v-if="item.titlepic">
    		<image :src="item.titlepic" mode="widthFix" lazy-load></image>
    	</template>
    	
    	<template v-if="item.video">
    		<view class="common-list-play icon iconfont icon-bofang"></view>
    		<view class="common-list-playinfo">
    			{
       {item.video.looknum}} 次播放 {
       {item.video.long}}
    		</view>
    	</template>
    	
    	<template v-if="item.share">
    		<view class="common-list-share u-f-ac">
    			<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
    			<view>{
       {item.share.title}}</view>
    		</view>
    	</template>
    </view>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/432a5d7da1e84bdcaf1b628d208859f2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关【项目】UniApp实战多端企业网盘全栈开发 37 封装文件列表组件

【项目】UniApp实战多端企业网盘全栈开发文章目录【项目】UniApp实战多端企业网盘全栈开发 37 封装文件列表组件

﹏ヽ暗。殇╰゛Y/ 2024年03月22日 16:40/ 0 赞/ 94 阅读

相关 un7.4:使用uniapp在前端页面中实现组件封装并使用。

今天我要和大家分享的是，如何在HbuilderX前端页面中实现组件封装并进行使用，其实实现此方法是极为简单的，接下来，我来展示一下。一、首先，我们打开前端页面（也就是Hbu

旧城等待，/ 2023年10月11日 17:44/ 0 赞/ 49 阅读

相关小程序开发组件(封装)

在根组件的component下边建立一个目录index，在index下新建一个component取名为index。如果需要全局引用的话，就在app.json下引入

忘是亡心i/ 2023年07月13日 03:38/ 0 赞/ 49 阅读

相关 uniapp兼容H5和小程序订阅消息授权开发封装，使用方便

本文使用 uniapp 框架开发，因为H5的订阅消息和小程序的订阅消息的授权流程不一样，但是很多地方需要使用授权，所以我封装了一个兼容H5和小程序订阅消息授权的方法，使用比较方

ゝ一纸荒年。/ 2022年12月20日 12:54/ 0 赞/ 316 阅读

相关前端：uniapp封装组件用法笔记

![63aae275184ccac66f1119891f22f77b.png][] 大家在做前端项目开发的时候，经常会遇到公用的一些页面，比如搜索、列表、商品详情卡片、评论列

深碍√TFBOYSˉ_/ 2022年09月14日 11:17/ 0 赞/ 260 阅读

相关 uniapp封装一个轮播组件

<template> <view class="content"> <uni-swiper-dot class="uni-swiper-dot-b

小灰灰/ 2022年08月30日 11:55/ 0 赞/ 406 阅读

相关 uniapp 收藏功能实现及组件封装

前言一、uniapp小程序收藏功能思路分析： 1. 父组件引入子组件.并且父组件通过属性绑定向子组件传递数据 2. 子组件利用props来接收父组件传

àì夳堔傛蜴生んèń/ 2021年09月02日 09:18/ 0 赞/ 1442 阅读

相关 uni-app开发(7)---兼容多类型DOM结构组件封装

在页面列表结构中，公共组件可以封装使用。但是，公共组件中类型可能有很多种，比如：文本、图文、视频、分享等等不同类型，我们在进行公共组件开发的时候，没有必要根据类型封装多个组件，

痛定思痛。/ 2021年08月02日 17:28/ 0 赞/ 163 阅读

相关 uniapp实战——封装商品列表组件并使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

系统管理员/ 2021年07月25日 23:53/ 0 赞/ 728 阅读

相关 uniapp 开发规范、引入组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2021年07月24日 18:24/ 0 赞/ 788 阅读