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样式设置

相关推荐
米粒宝的爸爸1 天前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz1 天前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw51 天前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 天前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐1 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长1 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
aklry2 天前
uniapp三步完成生成一维码图片
uni-app
雪芽蓝域zzs2 天前
uniapp 国密sm2加密
uni-app
打不着的大喇叭2 天前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app