首页 > 编程语言 >uinapp短剧短视频h5小程序app系统

uinapp短剧短视频h5小程序app系统

时间:2024-06-01 15:30:17浏览次数:43  
标签:app uinapp 250rpx height userinfo home h5 banner

技术栈:mysql+uinapp+php

banner.vue:

<template>
	<view>
		<swiper class="home-swiper-banner" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<navigator :url="item.link">
				<image :src="item.src" mode="aspectFill" style="border-radius: 16rpx"></image>
				</navigator>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	export default{
		props: ['banners'],
		data(){
			return {
				banners1:[],
			}
		},
	}
</script>

<style>
	 .home-swiper-banner{
		height: 250rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
		overflow: hidden;
	}
	.home-swiper-banner image{
		width: 100%;
		height: 250rpx;
	}
</style>

<template>
	<view class="home-header" style="background-color: #f75444">
	<view class="pd24_20">
		<view  v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
			<view   class="flex alcenter">
				<view class="member-face">
					<image class="face" :src="statics.defaultFace"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-main">暂未登录</view>
					<view class="mt12 ft12 cl-notice">点击登录 享受更多会员特惠</view>
				</view>
			</view>
			
			<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>	
		</view>
		<view  v-else class="flex alcenter space">
			<view class="flex alcenter" @click="opsets">
				<view class="member-face">
					<image class="face" :src="avatar"></image>
					<image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-main">{{ userinfo.nickname || '' }}</view>
					<view class="mt12 ft12 cl-notice">ID:{{ userinfo.user_id || '' }}</view>
				</view>
			</view>
			<view class="btn-mini opsetads" @click="opset">
				<image mode="aspectFit" style="width: 100%; height: 100%;" :src="staticUrl + 'sz.png?v=1'">
			</view>
		</view>
		<view style="width: 100%; height: 30upx;"></view>
		<home-vipcard :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard>
		<view class="mt24">
			<home-banner :banners="banners"></home-banner>
		</view>
		<view class="flex wrap space mt16">
			<view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
				<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo" class="box pd16_15 flex alcenter" style="width: 320rpx;" >
					<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
					<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
				</view>
				<view v-else style="width: 320rpx;">
					<button class="box pd16_15 flex alcenter" :open-type="item.type" style="padding: 32rpx 30rpx; margin: 0;">
						<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
					</button>
				</view>
			</view>
		</view>

 

 

标签:app,uinapp,250rpx,height,userinfo,home,h5,banner
From: https://blog.csdn.net/2301_76244095/article/details/139373451

相关文章

  • 手机APP令牌离线生成验证码
    手机APP令牌离线生成验证码当手机APP令牌离线生成验证码时,通常是通过以下步骤实现的:用户在手机APP上选择生成验证码选项。系统会生成一个随机的验证码,并将其显示在APP界面上。用户需要将生成的验证码手动输入到需要验证的系统中。这种离线生成验证码的方式通常用于在......
  • 一对一视频直播app开发,实现跨域的多种方式
    一对一视频直播app开发,实现跨域的多种方式一、document.domain+iframe跨域此方案仅限主域相同,子域不同的跨域应用场景。实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。父窗口(http://www.demo.com/a.html))<iframeid="iframe"src="h......
  • 【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service
    在前一篇文章中,我们是把.NET8应用读取SSL证书(X509)示例部署在AppServiceWindows环境中,那么如果部署在Linux环境,以及LinuxContainer中呢?根据前文中的第一种方法,直接在把证书文件包含在源文件中,通过相对路径读取证书文件的方式,经测试,可以正常工作。但是,对于第二种“通过指......
  • 基于ssm框架的app信息管理平台的设计与实现论文
    APP信息管理平台是一个功能强大的综合性管理平台,旨在为用户提供全面、便捷的公告信息、APP信息以及APP下载管理服务。在APP信息管理方面,平台提供了APP信息的上传、更新、维护等功能。用户可以轻松管理APP的基本信息、版本更新、功能介绍等内容,确保用户能够随时获取到最新......
  • uniapp使用EventBus实现页面间数据传递
    前情最近在做小程序项目,选用是当前比较火的uniapp技术栈,经常会遇到页面间消息传递的需求。为什么要这么做?uniapp页面间数据通信方式有很多:通过url传参,状态管理库vuex/pinia,本地存储,事件通道eventChannel,EventBus等,这次的需求是在A面点击一个按钮跳转到B页面拾取一个数据选项再......
  • CH57x/CH58x/CH59x获取从机广播信息
    有时需要通过主机设备(MCU非手机)获取从设备的广播信息例如广播包,MAC地址,扫描应答包等以下的程序片段及功能实现是在WCH的CH59X的observer例程上实现的;1、获取广播包所有的函数在库函数中都可以找到,具体实现函数如下:caseGAP_DEVICE_INFO_EVENT:{Observ......
  • uniapp实现图片上传——支持APP、微信小程序
    uniapp实现图片、视频上传文章目录uniapp实现图片、视频上传效果图组件templatejs使用相关文档:结合uView插件+uni.uploadFile实现u-uploaduploadfile效果图组件简单封装,还有很多属性…,自定义样式等…根据个人所需调整template<template> <view>......
  • Uscrapper:一款功能强大的网络资源爬取工具
    关于UscrapperUscrapper是一款功能强大的网络资源爬取工具,该工具可以帮助广大研究人员从各种网络资源中轻松高效地提取出有价值的数据,并且提供了稳定、友好且易于使用的UI界面,是安全研究人员和网络分析人员的强有力工具。Uscrapper最大程度地释放了开源情报资源的力量,该工具......
  • 软件测试人员必知H5/小程序测试点
    01H5相关测试H5优势:1.H5可以跨平台,开发成本相对较低;2.H5可随时上线就更新版本,适合快速迭代;3.H5可以轻量的触达用户,提供更快捷的服务;4.在微信入口或者浏览器上,用户只需点开链接就可以获取我们所提供的服务 H5劣势:1.H5->的转化强依赖于浏览器;2.H5目前基本无法将数据存储......
  • 揭秘APP广告变现项目
    在当今移动应用市场,广告变现已经成为开发者盈利策略的重要组成部分。通过在应用程序中展示多种类型的广告,如插页式广告、横幅广告和激励视频广告,开发者能够获得经济效益。实现这一目标的核心在于平衡收入与用户体验,避免过度干扰用户。激励视频广告由于其高观看率和参与度......