微信小程序未来七天日期处理（日期+星期）
效果图:js: // 处理未来七天的函数 dealTime: function (num) { // num：未来天数 var time = new Date() // 获取当前时间日期 var date = new Date(time.setDate(time.getDate() + num)).getDate() //这里先获取日期，在按需求设置日期，最后获取需要的 var year = time.getFullYear() //获取年份 var month = time.getMonth() + 1 // 获取月份 var day = time.getDay() // 获取星期 switch (day) { // 格式化 case 0: day = "日" break case 1: day = "一" break case 2: day = "二" break case 3: day = "三" break case 4: day = "四" break case 5: day = "五" break case 6: day = "六" break } var obj = { // date: date, day: month + '.' + date, // month: month, week:day, date:year+'-'+month + '-' + date } return obj // 返回对象 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var arr = [] for (let i = 0; i < 7; i++) { arr.push(this.dealTime(i)) } // arr[0].day = '今天' this.setData({ weekInfo: arr // 赋值给data },()=>{ console.log(this.data.aWeek) }) //api_data(this); 请求接口 },wxml {{item.day}} {{item.week}} wxss.nav .date-item { height: 166rpx; text-align: center; color: #9a9a9a; border: none; line-height: 78rpx; } .date-item .weeks { width: 70rpx; height: 70rpx; border-radius: 50%; background: #333333; text-align: center; line-height: 70rpx; color: white; /* margin-bottom: 5rpx; */ } .nav .date-item.Datecur .weeks { border: 4rpx solid red; color: #333333; background:white; }
在微信小程序中使用富文本转化插件wxParse
在微信小程序中使用富文本转化插件wxParse在微信小程序中我们往往需要展示一些丰富的页面内容，包括图片、文本等，基本上要求能够解析常规的HTML最好，由于微信的视图标签和HTML标签不一样，但是也有相对应的关系，因此有人把HTML转换做成了一个富文本转化插件wxParse，方便我们使用，前人种树后人乘凉，我们使用它来解析HTML就很方便了，这对于我们在后端已经完成的一些HTML内容，展示在小程序里就非常不错。 这个插件的Github地址如下：wxParse-微信小程序富文本解析组件，官方称它支持支持HTML及markdown解析，我这里主要用在小程序端解析HTML内容。1、硬编码HTML测试首先我们根据官方网站说明，下载内容后，复制文件夹wxParse到项目目录中（这里放在utils目录中），如下所示。 - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)然后在使用的JS文件中引入文件。// 引入对HTML内容解析的处理类 var WxParse = require('../../utils/wxParse/wxParse.js');接着在视图中引入样式文件，如下所示//在使用的Wxss中引入WxParse.css,可以在app.wxss /**app.wxss**/ @import "./utils/wxParse/wxParse.wxss";接着在视图文件中需要引入对应的模板文件，如下所示// 引入模板 <import src="你的路径/wxParse/wxParse.wxml"/> //这里data中article为bindName 一般我们会对模板的展示进行一定的调整，如下是我实际项目的界面代码 <import src="../../utils/wxParse/wxParse.wxml"/> 前面我们在JS文件里面只是做了文件的引用，为了实现数据的展示，我们需要插件wxParse对它进行数据绑定处理，我们为了方便，先定义一个HTML文档内容在本地，方便展示处理。在逻辑JS文件里面，我们先包含这个文件进来，如下代码所示。// 引入内置HTML对象文件 const company = require("./company.js");然后我们先来测试内置HTML的转换处理。/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; //使用内置HTML展现 var data = { url: company.url, image: company.image, content: company.content }; this.setData({ item: data }); WxParse.wxParse('content', 'html', data.content, that, 25);解析得到界面效果如下所示。2、动态获取HTML并展示上面我们是通过内置HTML文件的方式，然后把它包含进来，对内容进行转换显示，实际情况下，我们一般需要对内容进行动态化处理，通过请求服务器端的URL获取内容，并进行展示，如下代码所示。//使用Comprise的封装函数展现 var url ='http://localhost:27206/api/Framework/Information/FindByCode'; var companyurl = "http://www.iqidi.com"; var json = {code: 'company'}; app.utils.get(url, json).then(res=> { var data = { url: companyurl, image: res.Picture, content: res.Content }; that.setData({ item : data }); WxParse.wxParse('content', 'html', data.content, that, 25); });其中的app.utils.get 是对wxRequest的封装处理（使用了Promise插件），如下所示。//封装Request请求方法 function requst(url,method,data = {}){ wx.showNavigationBarLoading() data.method = method return new Promise((resove,reject) => { wx.request({ url: url, data: data, header: {}, method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function(res){ wx.hideNavigationBarLoading() resove(res.data) }, fail: function(msg) { console.log('reqest error',msg) wx.hideNavigationBarLoading() reject('fail') } }) }) }另外我们服务器返回的JSON如下所示这个后台是采用C#的MVC后台生成的JSON，具体后台代码如下所示。/// /// 通过代码获取对应的文章内容 /// /// 产品ID /// [HttpGet] public ExpandoObject FindByCode(string code) { //如果需要修改字段显示，则参考下面代码处理 dynamic obj = new ExpandoObject(); var info = baseBLL.FindSingle(string.Format("Code='{0}' AND IsDoc=0 ", code)); if (info != null) { obj.ID = info.ID; obj.Title = info.Title; obj.Content = info.Content; obj.Picture = info.Picture; obj.Category = info.Category; } return obj; }解析得到界面效果和上面的一致。以上就是使用富文本转化插件wxParse对HTML内容进行的转换实现，这些动态内容，我们可以利用网站后台进行动态的维护即可。文章列表管理界面如下所示： 文章内容编辑界面如下所示
在微信小程序的JS脚本中使用Promise来优化函数处理
在微信小程序的JS脚本中使用Promise来优化函数处理在我们传统的Javascript开发函数编写中，我们习惯了回调函数的处理，不过随着回调函数的增多，以及异步处理的复杂性等原因，代码越来越难读，因此诞生了使用Promise来优化JS函数处理的需求，引入Promise确实能够很好的解决异步回调函数的可读性等问题，同时也使得我们调用的时候代码简洁一些，本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法。1、小程序传统的回调处理例如我们生成一个小程序，里面的app.js里面就自动带有一个getUserInfo的函数，这个是使用传统模式的回调函数。//app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo: null, openid: null } })这种是通过 传入一个cb的回调函数进行处理，使用的时候为了安全性，还需要进一步判断其类型是否为函数：typeof cb == "function"，这种处理还是相对比较易懂。但是，如果我们一段代码中，异步操作太多，又要保证这些异步操作是有顺序的执行，那我们的代码就看起来非常糟糕，就像这样的极端情况：asyncFunc1(function(){ //... asyncFunc2(function(){ //... asyncFunc3(function(){ //... asyncFunc4(function(){ //... asyncFunc5(function(){ //... }); }); }); }); });如果我们改用Promise来处理，那么进行一层简单的包装即可。function asyncFunc1(){ return new Promise(function (resolve, reject) { //... }) }2、Promise的使用介绍Promise的使用相对比较简单，我们入门可以参考下相关介绍：阮一峰 promise入门，如果我们在JS函数里面引入它的话，那么需要包含对应的javascript组件我们可以在Github上下载对应的组件JS，引入小程序项目即可：es6-promise我们为了方便，在项目中创建一个辅助类utils.js，然后在其中引入Promise的脚本，如下所示。2、Promise的使用介绍const Promise = require('./Promise')然后在APP.js里面，我们修改原来的getUserInfo函数如下//app.js const utils = require('./utils/util.js') App({ onLaunch: function() { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo() { return new utils.Promise((resolve, reject) => { if (this.globalData.userInfo) { resolve(this.globalData.userInfo) } return utils.getUserInfo().then(res => { resolve(this.globalData.userInfo = res.userInfo) }) }) }, //获取系统信息 getSystemInfo() { return new utils.Promise((resolve, reject) => { var that = this if (that.globalData.systemInfo) { resolve(that.globalData.systemInfo) } else { wx.getSystemInfo({ success: function(res) { resolve(that.globalData.systemInfo = res); } }) } }) }, //全局对象 globalData: { userInfo: null, systemInfo: null }, utils })我们看到，所有原先的函数，我们如果需要引入Promise处理的话，增加一层的函数体即可。return new utils.Promise((resolve, reject) => { // 原来的函数体代码 });这样我们调用的时候，使用then函数进行处理即可，类似下面的代码。getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log);引入这个Promise后，我们为了进一步实现代码的重用，可以把一些常见的函数放到utils.js来，这样可以实现代码的重用。//用户登录 function login(){ return new Promise((resolve,reject) => wx.login({ success:resolve, fail:reject })) } //获取用户信息 function getUserInfo(){ return login().then(res => new Promise((resolve,reject) => wx.getUserInfo({ success:resolve, fail:reject }) )) }function requstGet(url,data){ return requst(url,'GET',data) } function requstPost(url,data){ return requst(url,'POST',data) } //封装Request请求方法 function requst(url,method,data = {}){ wx.showNavigationBarLoading() data.method = method return new Promise((resove,reject) => { wx.request({ url: url, data: data, header: {}, method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function(res){ wx.hideNavigationBarLoading() resove(res.data) }, fail: function(msg) { console.log('reqest error',msg) wx.hideNavigationBarLoading() reject('fail') } }) }) }然后发布对应的接口，以供其他模块使用即可。//发布的接口 module.exports = { Promise,makeArray,getUserInfo, get:requstGet,post:requstPost,requst,decodeHtml, formatTime,getDateDiff }封装好这些公用方法后，我们在页面里面进行调用即可，调用的代码如下所示（演示代码从地址里面获取数据，并绑定到界面上）//使用Comprise的封装函数展现 var url ='http://localhost:27206/api/Framework/Information/FindByCode'; var companyurl = "http://www.iqidi.com"; var json = {code: 'company'}; app.utils.get(url, json).then(function(res) { var data = { url: companyurl, image: res.Picture, content: res.Content }; that.setData({ item : data }); WxParse.wxParse('content', 'html', data.content, that, 25); });而如果我们使用原来的函数，那么实现代码如下所示。// 使用标准的wx.request函数实现展现 var url ='http://localhost:27206/api/Framework/Information/FindByCode'; var companyurl = "http://www.iqidi.com"; var json = {code: 'company'}; wx.request({ url: url, data: json, success: function(res) { console.log(res); var data = { url: companyurl, image: res.data.Picture, content: res.data.Content }; that.setData({ item : data }); WxParse.wxParse('content', 'html', data.content, that, 25); } })如果对于复杂流程的函数处理，使用Promise来处理，会显得更加简洁易读。
微信小程序对接使用腾讯地图-位置选点和路线规划接口
效果图代码app.json中添加代码"plugins":{ "chooseLocation":{ "version":"1.0.2", "provider":"wx76a9a06e5b4e693e" }, "routePlan":{ "version":"1.0.5", "provider":"wx50b5593e81dd937a" } }, "permission":{ "scope.userLocation":{ "desc":"您的位置信息将用于小程序定位" } },map.wxml 代码 地图选点 路线规划 地图选点位置： {{address}} 3.map.js文件代码// pages/city/city.js const chooseLocation = requirePlugin('chooseLocation')//地图选点结果插件实例 Page({ /** * 页面的初始数据 */ data: { latitude:"", longitude:"", address:"", key: 'VEHBZ-QXKLW-YRMR4-RWZSZ-UNGOS-FLFFM',//在腾讯位置服务申请的key referer: '微信小程序定位', //调用腾讯位置服务相关插件的app的名称 rightArrow:"../../images/rightArrow.png" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象 const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null if(location !=null){ console.log(location) this.setData({ latitude: location.latitude, longitude:location.longitude, address:location.name }) } }, //腾讯位置服务地图选点 clickMap(){ let that = this //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 wx.getSetting({ success(res){ //console.log(res) //scope.userLocation 就是地理授权的标志： //res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面 //res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权 //res.authSetting['scope.userLocation'] == true 表示地理位置授权 if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){ //表示非初始化进入该页面 且未授权： wx.showModal({ title: '请求授权当前位置', content: '需要获取您的地理位置，请确认授权', showCancel: true, cancelText: '取消', cancelColor: '#000000', confirmText: '确定', confirmColor: '#3CC51F', success: (result) => { if(res.cancel){ wx.showToast({ title: '拒绝授权', icon: 'none', duration: 1000 }); }else if (result.confirm) { //调起客户端小程序设置界面，返回用户设置的操作结果。 //设置界面只会出现小程序已经向用户请求过的权限 wx.openSetting({ success: (dataAu) => { if(dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }); //再次授权之后，调用腾讯位置服务的地图选点插件API that.callQQPlugin() }else { wx.showToast({ title: '授权失败', icon: 'none', duration: 1000 }); } } }); } } }); }else if(res.authSetting['scope.userLocation'] == undefined){ //调用腾讯位置服务的地图选点插件API that.callQQPlugin() }else{ //调用腾讯位置服务的地图选点插件API that.callQQPlugin() } } }) }, //调用腾讯位置服务的地图选点插件API callQQPlugin(){ const key = this.data.key; //使用在腾讯位置服务申请的key const referer = this.data.referer; //调用插件的app的名称 const latitude = this.data.latitude const longitude = this.data.longitude if(latitude !="" && longitude !=""){ const location = JSON.stringify({ latitude: latitude, longitude: longitude }); wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location }); }else{ wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer }); } }, //腾讯位置服务路线规划 routePlan(){ let that = this //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 wx.getSetting({ success(res){ //console.log(res) //scope.userLocation 就是地理授权的标志： //res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面 //res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权 //res.authSetting['scope.userLocation'] == true 表示地理位置授权 if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){ //表示非初始化进入该页面 且未授权： wx.showModal({ title: '请求授权当前位置', content: '需要获取您的地理位置，请确认授权', showCancel: true, cancelText: '取消', cancelColor: '#000000', confirmText: '确定', confirmColor: '#3CC51F', success: (result) => { if(res.cancel){ wx.showToast({ title: '拒绝授权', icon: 'none', duration: 1000 }); }else if (result.confirm) { //调起客户端小程序设置界面，返回用户设置的操作结果。 //设置界面只会出现小程序已经向用户请求过的权限 wx.openSetting({ success: (dataAu) => { if(dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }); //再次授权之后，调用腾讯位置服务的路线规划插件API that.callRoutePlanPlugin() }else { wx.showToast({ title: '授权失败', icon: 'none', duration: 1000 }); } } }); } } }); }else if(res.authSetting['scope.userLocation'] == undefined){ //调用腾讯位置服务的路线规划插件API that.callRoutePlanPlugin() }else{ //调用腾讯位置服务的路线规划插件API that.callRoutePlanPlugin() } } }) }, // callRoutePlanPlugin(){ let plugin = requirePlugin('routePlan')//路线规划插件 let key = this.data.key; //使用在腾讯位置服务申请的key let referer = this.data.referer; //调用插件的app的名称 let latitude = this.data.latitude let longitude = this.data.longitude if(latitude !="" && longitude !=""){ let endPoint = JSON.stringify({ //终点 name:this.data.address, latitude: latitude, longitude: longitude }) wx.navigateTo({ url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer+'&endPoint= ' +endPoint }); }else{ console.log('请先选择地点') } } })4.map.wxss代码/* pages/city/city.wxss */ page{ width: 100%; background: #f7f7f7; } .main{ width:100%; margin-top: 60rpx; } .row{ display: flex; flex-direction: row; align-items: center; height: 100rpx; background: #ffffff; } .hintText{ width:90%; font-size: 28rpx; color:#000000; font-family: PingFang SC; font-weight: 400; padding-left: 30rpx; } .rightArrow{ width:36rpx; height: 36rpx; } .line{ margin-left: 30rpx; height: 1rpx; background: #eeeeee; } /*选点具体结果*/ .addressRow{ display: flex; flex-direction: column; align-items: center; height: 200rpx; background: #ffffff; } .addressHint{ width:90%; font-size: 32rpx; color:green; font-family: PingFang SC; font-weight: bold; padding-left: 30rpx; }
微信小程序滚动Tab选项卡：左右可滑动切换
最终效果如上。问题：1、tab标题总共8个，所以一屏无法全部显示。2、tab内容区左右滑动切换时，tab标题随即做标记（active）。3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。一、wxml结构tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。tab内容可左右滑动切换，使用swiper组件实现为了偷懒，所以数据都通过wx:for遍历重复出来。二说明：1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。2、swiper组件的current组件用于控制当前显示哪一页3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页三、wxml部分 健康 情感 职场 育儿 纠纷 青葱 全部 其他 欢颜 知名情感博主 134个回答，2234人听过 问TA 三、js部分微信小程序在开发起来，个人感觉挺像vue的，以数据驱动视图的更新。所以在小程序中，不能直接操作dom，当然也不能使用jquery之类的库。var app = getApp(); Page({ data:{ winHeight:"",//窗口高度 currentTab:0, //预设当前项的值 scrollLeft:0, //tab标题的滚动条位置 expertList:[{ //假数据 img:"avatar.png", name:"欢顔", tag:"知名情感博主", answer:134, listen:2234 }] }, // 滚动切换标签样式 switchTab:function(e){ this.setData({ currentTab:e.detail.current }); this.checkCor(); }, // 点击标题切换当前页时改变样式 swichNav:function(e){ var cur=e.target.dataset.current; if(this.data.currentTaB==cur){return false;} else{ this.setData({ currentTab:cur }) } }, //判断当前滚动超过一屏时，设置tab标题滚动条。 checkCor:function(){ if (this.data.currentTab>4){ this.setData({ scrollLeft:300 }) }else{ this.setData({ scrollLeft:0 }) } }, onLoad: function() { var that = this; // 高度自适应 wx.getSystemInfo( { success: function( res ) { var clientHeight=res.windowHeight, clientWidth=res.windowWidth, rpxR=750/clientWidth; var calc=clientHeight*rpxR-180; console.log(calc) that.setData( { winHeight: calc }); } }); }, footerTap:app.footerTap })三、wxss样式.tab-h{ height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;} .tab-item{margin:0 36rpx;display: inline-block;} .tab-item.active{color: #4675F9;position: relative;} .tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;} .item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;} .avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;} .avatar .img{width: 100%;height: 100%;} .avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;} .expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;} .expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;} .askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;} .tab-content{margin-top: 80rpx;} .scoll-h{height: 100%;}
核心代码： -webkit-linear-gradient()/**app.wxss**/ page { background: -webkit-linear-gradient(top,rgb(244,157,4),#FACF94,white); } rgb(244,157,4)： 第一个颜色名#FACF94：第二个颜色名white：第三个颜色名 背景渐变效果图：
效果：css: .words { font-size: 30rpx; font-weight: bold; background: linear-gradient(to right, red, yellow); -webkit-background-clip: text; background-clip: text; /*以文字的范围对背景进行裁剪*/ color: transparent; }
效果如下:1、wxml 显示遮罩 提交按钮 2、wxss/* 设置背景遮罩层样式 */ .mask { color:rgb(98 189 255)">position: fixed; color:rgb(73 238 255)">left: 0; color:rgb(255 111 119)">top: 0; color:rgb(255 95 0)">right: 0; color:rgb(255 211 0)">bottom: 0; color:rgb(98 189 255)">background: rgba(0, 0, 0, 0.5); color:rgb(253 97 106)">display: flex; color:rgb(98 189 255)">justify-content: center; color:rgb(98 189 255)">align-items: center; color:rgb(98 189 255)">flex-direction: column; } /* 设置遮罩内容样式 */ .maskContent { color:rgb(255 95 0)">width: 70%; color:rgb(98 189 255)">background: #fff; color:rgb(98 189 255)">border-radius: 5px; color:rgb(253 97 106)">padding: 30rpx; } /* 设置关闭按钮图片的位置 */ .closeImg { color:rgb(98 189 255)">position: fixed; color:rgb(255 111 119)">top: 40rpx; color:rgb(255 95 0)">right: 40rpx; } /* 设置关闭按钮宽高 */ .closeImg_image { color:rgb(255 95 0)">width: 50rpx; color:rgb(255 211 0)">height: 50rpx; } .btn{ color:rgb(255 95 0)">width: 80%; color:rgb(255 211 0)">margin: 20rpx auto; color:rgb(98 189 255)">background: #ff6600; color: #fff; line-color:rgb(255 211 0)">height: 60rpx; font-size: 32rpx; text-align: center; color:rgb(98 189 255)">border-radius: 3px; } .input{ border: 1px solid #ccc; color:rgb(98 189 255)">border-radius: 3px; font-size: 28rpx; color:rgb(253 97 106)">padding: 0 10rpx; color:rgb(255 211 0)">margin: 20rpx 0; line-color:rgb(255 211 0)">height: 60rpx; }3、jsPage({ data: { flag: true, }, showMask: function () { this.setData({ flag: false }) }, closeMask: function () { this.setData({ flag: true }) } })
页面布局如下： 我是页面内容 //圆弧部分的高度是由box的高度决定的css部分代码如下所示：.box { position: relative; } .box::after { content: ''; width: 140%; height: 100%; position: absolute; left: -20%; top: 0; z-index: -1; border-radius: 0 0 50% 50%; background: #2ea7e0; }最终效果如图：