鸡汤来咯开发学习笔记-11

1.common-style.css里面加入image的公共样式，来锁定每个图片的大小image{ width: 100rpx; height: 100rpx; }2.在auther里面加入共12人看过，让用户点入详情页能查看看过的人数，并新增一个容器outer，把下面显示行的信息放在里面 <view class="outer"> <view class="userinfo"> <view class="avatar"> <image src="../../static/images/self.png" mode="aspectFill"></image> </view> <view class="name">豚豚</view>

前端 · 2024-07-01

鸡汤来咯开发学习笔记-10

1.创建一个soup-tab-group的组件，然后把以前index.vue的soup-tab-group的内容包括scss样式移植到组件里面，然后index.vue再引用<template> <view class="soupTapGroup"> <view class="tab" v-if="true"> <view class="icon"> <image src="../../static/images/du-icon.png" mode="aspectFill"></image> </view> <view class="text">毒鸡汤</view> </view>

前端 · 2024-06-29

鸡汤来咯开发学习笔记-9

1.使用扩展插件uni-popup弹出层，引入写入index.vue中<uni-popup ref="usePopup" type="center" @maskClick="closeUsePopup">// 建立弹出事件 <view class="usePopup"> <image src="../../static/images/upward.png" mode="heightFix" @click="closeUsePopup"></image> </view> 2.写入弹出层的css样式usePopup{ padding-top: 15vh; image{ height: 150rpx; transform: translateY(100rpx); //位移 opacity: 0; //透

前端 · 2024-06-28

鸡汤来咯开发学习笔记-8

1.swiper轮播，进度条的进度控制 <view class="progress"> <view class="line" :style="{width:lineWidth+'%'}"></view> </view> 样式的宽度也就是进度改为变量控制<swiper vertical @change="swiperChange"> <swiper-item v-for="(item,index) in listData" :key="index"> 在轮播器上加入change事件，和listData的变量，来获取控制轮播器当前页面的参数<script setup> import { computed, ref } from 'vue'; const listData = ref([1,2,3,4,5]); const curren

前端 · 2024-06-27

鸡汤来咯开发学习笔记-7

1.安装官方的扩展组件uni-icons图标2.在index.vue的info中加入内容，以下代码，加入1中的图标 <view class="left"> <view class="item"> <uni-icons type="redo" size="28" color="#999"></uni-icons> <text></text> </view> </view> <view class="right&

前端 · 2024-06-26
2024 - 2025 ikrins‘Blog. All Rights Reserved.
Theme Jasmine by Kent Liao