大型门户网站建设美丽wordpress 文章别名

当前位置： 首页 > news >正文

大型门户网站建设美丽,wordpress 文章别名,登封建设局网站,郑州知名网站建设公司首先声明#xff1a;不敢保证都管用#xff0c;这是我自己实践得来的。 box-shadow: 这段 CSS 样式代码用于创建一个阴影效果#xff0c;它是通过 box-shadow 属性来实现的。让我解释一下这段代码的含义#xff1a; - box-shadow: 这是 CSS 的属性#xff0c;用于添加阴影…首先声明不敢保证都管用这是我自己实践得来的。 box-shadow: 这段 CSS 样式代码用于创建一个阴影效果它是通过 box-shadow 属性来实现的。让我解释一下这段代码的含义 - box-shadow: 这是 CSS 的属性用于添加阴影效果到一个元素上。 - 0: 这是阴影的水平偏移量表示阴影水平方向上不偏移即阴影在元素的下方。 - 14rpx: 这是阴影的垂直偏移量表示阴影垂直方向上偏移了 14 个 rpx 单位。rpx 是一种相对长度单位常用于适配不同屏幕分辨率的移动应用开发。 - 18rpx: 这是阴影的模糊半径表示阴影的边缘会模糊化模糊半径为 18 个 rpx 单位。 - rgba(0, 0, 0, 0.1): 这是阴影的颜色和透明度。rgba 表示颜色由红、绿、蓝三个通道组成每个通道的取值范围是 0 到 255而最后一个参数表示透明度取值范围是 0完全透明到 1完全不透明。在这里阴影的颜色是黑色红、绿、蓝都为 0透明度为 0.1即略带半透明的黑色阴影。 所以这段代码的效果是在元素的下方水平不偏移垂直下移 14rpx添加了一个半透明的黑色阴影阴影的边缘有轻微的模糊效果。您可以根据需要调整偏移量、模糊半径和颜色来定制阴影效果。 box-shadow: 0 14rpx 18rpx rgba(0, 0, 0, 0.1); rpx适用于小程序px适用于pc端 uniapp的搜索功能 链接http://t.csdn.cn/wdUPg utc时间转换成为本地时间uniapp版 链接http://t.csdn.cn/XZryS uniapp登录微信小程序目前还能用的版本 view部分 button classcheckboxstr clickwxlogin open-typechooseAvatar chooseavatarwxloginimage stylewidth: 50rpx;height: 50rpx;margin-top: 10rpx; srchttps://pic.imgdb.cn/item/64f71ef9661c6c8e54b5cc40.png mode/imagetext stylemargin-top: -10rpx;justify-content: center;display: flex;微信授权登录/text /button script部分 // 登录wxlogin() {// console.log(e.detail.avatarUrl,image);// if(e.detail.avatarUrl!){// this.sg true// this.avatare.detail.avatarUrl// uni.setStorageSync(uming,e.detail.avatarUrl)// }// let that this;this.tanchu_shengfalse;//先获取用户的信息uni.getUserInfo({desc: 登录的数据,success(ures) {console.log(ures, 返回的用户信息);//这个地方的用户信息无论登录成功失败都可以拿到只是拿到用户的信息//在成功的回调中去使用微信登录uni.login({provider: weixin, //使用微信登录success(lres) {console.log(lres, 获取到的code——–1);//我们要根据上面获取的code码去作为请求参数发送给后端let params {code: lres.code};console.log(lres.code,查看code——–2);// 1uni.request({url: 登录接口,//这里用自己的地址获取method: POST,data: {code: lres.code},success: (res) {console.log(res,测试是否成功);//获得token完成登录uni.setStorageSync(token, res.data.data.token)uni.setStorageSync(id, res.data.data.id)console.log(res,登录测试);// 提示uni.showToast({title: 登陆成功,icon: none,duration: 2000,success: () {// console.log(轻提示显示成功);},fail: (error) {// console.error(轻提示显示失败, error);}});}});// 2}});}});}, uniapp通过url跳转传参 在 PageA 中触发跳转同时将参数附加到目标页面的 URL 中。 templateview!– 触发跳转到 PageB –button clickgoToPageB跳转到 PageB/button/view /templatescript export default {methods: {goToPageB() {// 使用 uni.navigateTo 方法跳转到 PageB并传递参数uni.navigateTo({url: /pages/PageB?param1value1param2value2,});},}, }; /script在 PageB 中获取 URL 参数并处理数据。 templateview!– 在 PageB 中显示参数 –text参数1{{ param1 }}/texttext参数2{{ param2 }}/text/view /templatescript export default {data() {return {param1: ,param2: ,};},onLoad(options) {// 在页面加载时获取 URL 参数this.param1 options.param1 || ;this.param2 options.param2 || ;}, }; /script3元表达式 下方是我写的一个小案例 {{shuju_dangan.nickname null ? 暂无数据 : shuju_dangan.nickname undefined ? 暂无数据 : shuju_dangan.nickname}} 如果 shuju_dangan.nickname 的值为 null则显示 暂无数据。否则如果 shuju_dangan.nickname 的值为 undefined同样显示 暂无数据。如果 shuju_dangan.nickname 的值既不是 null 也不是 undefined则显示 shuju_dangan.nickname 的值。 下方是一个进行简咯日期判断的三元表达式 {{item.end_time 2023-08-30 ? 数值1 : 数值2}} uniapp图片上传 view部分 view classview class stylepadding: 30rpx;font-size: 30rpx;上传图片/viewview class stylemargin-left: 2.5%;display: flex;!– 图片上传 –image :srcshujus stylewidth:200rpx ;height: 200rpx; mode/imageu-upload :fileListfileList1 width200rpx height200rpx afterReadafterRead deletedeletePic name1 multiple:maxCount10/u-upload/view/view script部分 fileList1: [],imageUrl: , // 用于展示选择的图片shujus:, // 图片上传// 删除图片deletePic(event) {this[fileList\({event.name}].splice(event.index, 1)},// 新增图片async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式否则为对象格式let lists [].concat(event.file[0].url)uni.uploadFile({url: 接口, // 仅为示例非真实的接口地址filePath: event.file[0].url,name: file,formData: {user: test},success: (res) {console.log(res.data);this.uploadImg JSON.parse(res.data)console.log(this.uploadImg.url,123123);this.shujus this.uploadImg.url;uni.showToast({title: 图片上传成功,icon: none,duration: 2000,success: () {},fail: (error) {}})setTimeout(() {resolve(res)}, 1000)}});return// let fileListLen this[fileList\){event.name}].length// lists.map((item) {// this[fileList\({event.name}].push({// ...item,// status: uploading,// message: 上传中// })// })// for (let i 0; i lists.length; i) {// const result await this.uploadFilePromise(lists[i].url)// let item this[fileList\){event.name}][fileListLen]// this[fileList${event.name}].splice(fileListLen, 1, Object.assign(item, {// status: success,// message: ,// url: result// }))// fileListLen// }},uploadFilePromise(url) {console.log(url,123123123);return// return new Promise((resolve, reject) {// let a // })}, setTimeout setTimeout(function() {// 这里放置您希望在延迟之后执行的代码 }, 10); // 10 毫秒的延迟setTimeout 函数用于创建一个定时器该定时器将在 10 毫秒后执行函数内的代码块。 background: linear-gradient(); background: linear-gradient(to bottom, #FFFFFF, #EDFEF6); 这段 CSS 代码用于创建一个线性渐变背景从顶部到底部由白色渐变到 #EDFEF6 这个颜色。让我解释一下这个代码的含义 background这是 CSS 属性用于设置元素的背景样式。 linear-gradient这是背景属性的值表示要创建一个线性渐变背景。 to bottom这是线性渐变的方向表示颜色从上到下渐变。您还可以使用其他方向例如 to top从下到上、to left从右到左等。 #FFFFFF 和 #EDFEF6这是渐变的起始颜色和结束颜色。在这个例子中渐变从白色 (#FFFFFF) 开始到 #EDFEF6 结束。 这段代码的效果是将元素的背景设置为一个从顶部到底部的渐变颜色逐渐从白色变为 #EDFEF6这可以用来创建视觉上的渐变效果使元素的背景看起来更丰富和吸引人。您可以根据需要调整颜色和渐变方向来满足您的设计要求。 split剪切自己想要的数据 下方只是一个简单的示例在确保自己拿到数据的情况下循环数据中的某个自己想要修改的字段进行修改切的时候可以是空格 逗号 也可以是某个字母 for (let i 0; i res.data.data.length; i) { res.data.data[i].end_time res.data.data[i].end_time.split( )[0] } uniapp input 这样可以打印到自己的数值 input typetext v-modelinputValue class stylewidth: 70%;margin-top: 40rpx; inputname placeholder请输入inputValue: ,name(s) {console.log(s.detail.value);}, uniapp选项卡功能 使用uview组件来进行演示uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)https://www.uviewui.com/ templateviewu-tabs:listlist4:activeIndexactiveIndexchangetabChangelineWidth30lineColor#f56c6c:activeStyle{color: #303133,fontWeight: bold,transform: scale(1.05)}:inactiveStyle{color: #606266,transform: scale(1)}itemStyleheight: 60px;background-color:#ffffff;width:30%/u-tabs/view /templatescript export default {data() {return {list4: [{ label: 选项卡1, value: tab1 },{ label: 选项卡2, value: tab2 },{ label: 选项卡3, value: tab3 },],activeIndex: 0, // 当前激活的选项卡索引};},methods: {tabChange(index) {// 当选项卡切换时触发该方法更新激活的选项卡索引this.activeIndex index;},}, }; /script具体怎么使用还要看使用者 uniapp轻提示 uni.showToast({title: 图片上传成功,icon: none,duration: 2000,success: () {},fail: (error) {}}) uni.showToast 是 UniApp 中用于显示轻量级提示消息的方法。title 属性用于设置提示消息的内容这里设置为 图片上传成功。icon 属性用于设置提示消息的图标这里设置为 none 表示不显示图标如果需要显示图标可以设置为 success、loading 等。duration 属性用于设置提示消息的显示时间以毫秒为单位这里设置为 2000 表示消息将在 2 秒后自动消失。success 和 fail 属性是回调函数在成功或失败时执行相应的操作。在这个示例中它们为空函数没有特定的操作。 这段代码的目的是在图片上传成功后显示一个包含 图片上传成功 文字的提示消息该消息不包含图标并在 2 秒后自动消失。 uniapp从当前页面切换到指定标签页 不带有返回标记的标签 uni.switchTab({url:/pages/页面/页面,success: (res) {let page getCurrentPages().pop();if (page undefined || page null) return;page.onLoad();}}) uni.switchTab 是 UniApp 中用于切换标签页的方法。url 属性用于指定要切换到的标签页的页面路径这里设置为 /pages/ji_fen_shang_cheng/ji_fen_shang_cheng表示要切换到名为 ji_fen_shang_cheng 的标签页。success 属性是一个回调函数当切换成功时执行。在这个示例中它的操作是重新加载当前页面以确保在返回到当前页面时数据得到更新。 非常感谢观看