uniapp一些问题解决

1.按钮边框如何去除?

参考博主:微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app,顺便自己写个小程序。左上角放了个button,可边框怎么也去不掉...原来微信小程序的按钮要去掉边框要这么写。。。_微信小程序button去掉边框https://blog.csdn.net/weixin_43738058/article/details/94738053?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-0-94738053-blog-135058801.235%5Ev43%5Epc_blog_bottom_relevance_base4&spm=1001.2101.3001.4242.1&utm_relevant_index=3

2.弹窗代码

复制代码
	<view class="popup-container" v-if="showPopup">
			<view class="popup">
				<view class="popup-header">
					<text>弹窗标题</text>
					<view class="close-btn" @click="closePopup">×</view>
				</view>
				<view class="popup-content">
					<input type="text" v-model="inputValue" placeholder="请输入内容" />
				</view>
				<view class="popup-footer">
					<button @click="confirmPopup">确定</button>
				</view>
			</view>
		</view>


其中data如下:

	data() {
			return {
				showPopup:false, // 控制弹窗显示与隐藏  
				inputValue: '', // 输入框的值  
			}
		},
methods如下
// 显示弹窗  
		showPopupFunc() {
				this.showPopup = true;
		},
		// 关闭弹窗  
		closePopup() {
				console.log(this.showPopup,'jhh');
				this.showPopup = false;
				this.inputValue = ''; // 清空输入框  
			},
			// 确认弹窗内容  
			confirmPopup() {
				// 这里可以处理输入框的值,比如发送到服务器等  
				console.log('你输入了:', this.inputValue);
				this.closePopup(); // 关闭弹窗  
			},
css样式
	/* 弹窗样式 */
		.popup-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.5);
			/* 半透明背景 */
		}

		.popup {
			width: 80%;
			/* 弹窗宽度 */
			background-color: #fff;
			border-radius: 10px;
		}

		.popup-header,
		.popup-content,
		.popup-footer {
			padding: 10px;
		}

		.close-btn {
			/* 关闭按钮的样式 */
			float: right;
			font-size: 20px;
			line-height: 1;
			cursor: pointer;
		}

3:nvue页面和vue控制显隐只可以使用v-if不可以使用v-show页面

4.uni冒泡解决

5.样式绑定

点击变化按钮--改变宽度

6.uniapp的登录拦截如何写??---全网最全!

页面跳转用的"switchTab"

创建这样的目录结构就完事!

然后在requestInter.js敲如下代码--注意自己的路径!

复制代码
function requestInter() {


	const whiteList = ['/pages/index/index']

	//判断是否登录或者可以进入白名单
	function hasPermission(url) {
		//获取token
		let isLogin = uni.getStorageSync('note-token')
		//token-true或者false
		isLogin = Boolean(Number(isLogin))

		// 在白名单内/有登录的,直接跳转
		if (whiteList.indexOf(url) !== -1 || isLogin) {
			console.log("跳转的页面在白名单内/已经实现登录");
			return true
		}
		console.log("跳转的页面不在白名单内并且没实现登录");
		return false
	}

	const handler = (options) => {
		
		// 不在白名单内且没有登录
		if (!hasPermission(options.url)) {
			// 清空跳转的路径记录
			uni.reLaunch({
				url: '/pages/login/login'
			})
			//实现拦截 
			return false
		}
		//实现登录
		return true
	}
	// switchTab拦截
	uni.addInterceptor( /*要拦截的api*/ 'switchTab', /*对象*/ {
		invoke: handler
	})

}

export default {
	// 是否开启拦截
	enable: true,
	requestInter
}

在index.js敲如下代码:意思是调用拦截

复制代码
import requestFn from "./requestInter.js";
export default function() {
	if (requestFn.enable) requestFn.requestInter()
}

来到app.vuey进入调用完事!

7.如何使用vant组件图标??参考博主

微信小程序安装Vant组件库-CSDN博客

8.input的placeholder样式设置

相关推荐
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921431 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
ღ᭄ꦿ࿐Never say never꧂2 天前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀2 天前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
2501_915106322 天前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张2 天前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview