实习笔记（含代码）

最新推荐文章于 2024-10-29 10:06:15 发布

煦274

最新推荐文章于 2024-10-29 10:06:15 发布

阅读量182

点赞数

文章标签： vue.js javascript 前端 html5 css

本文链接：https://blog.csdn.net/qq_59504527/article/details/125381860

版权

本文介绍了前端开发中的一些实用技巧，包括图片导入、清除点击高亮、配置vue.config.js、使用flex布局、动态样式切换、解析URL参数以及数据整合优化。通过示例代码详细解释了如何将数据结构转换以提高效率，便于快速访问和使用。

摘要由CSDN通过智能技术生成

1.图片通过本地路径导入时，需要require（）包裹路径，如options:[
{"img":require("../assets/options/vivid/VIVID.png")},
{"img":require("../assets/options/purist/PURIST.png")}
]
2.-webkit-tap-highlight-color:rgba(255,0,0,0);给a标签设置该样式用于清除手机端下，点击a标签会出现蓝色框框的问题
3.vue.config.js文件中写入
module.exports = {
publicPath: './'
}
确认了打包后文件的路径
4.使用flex：auto实现自适应
5.使用 <div :class="{ tab: 1, active: index == num }" @click="change(index)">实现动态变换，tab：1为div默认值与默认样式，当双向数据绑定的num==index时，会动态显示active的内容，取代tab
6. this.str = parseInt(href.substr(href.indexOf("?") + 1, href.length));该代码可以获取地址栏中？后的参数
7. this.select = this.optionsxx[this.num].icons;选中的num作为数组下标，获取到对应下标的数据作为数据源
8.gulp fbt:项目名称，可以在后台管理中获取样式、图标等配置信息，再在小程序中生成xxx.wxss文件替换原来的默认样式

9.例如此类数据，可以将spot_marker_type_list中改为对象值如{220:1,2387:2}，然后通过for in 遍历将marker_type_list中markerTypeId相等的值整合成{spotid:对应组的数据},最后在获取的时候，直接[spotid]取到对应组的数据，达到优化的目的
"conf":{
"marker_type_list": [{
"markerTypeId": 1,
"name": "自定义图标组1",
"icon_s_0": "https://sightp-tour-cdn.sightp.com/wxapp/MapUiTest/i-%E5%A4%A7%E7%82%B9%E4%BD%8D-%E6%9C%AA%E5%88%B0%E8%BE%BE-AR@2x.png",
"icon_s_1": "https://sightp-tour-cdn.sightp.com/wxapp/MapUiTest/AR-%E8%93%9D@2x.png"

},
{
"markerTypeId": 2,
"name": "自定义图标组2",
"icon_s_0": "4"
}],
"spot_marker_type_list": [{
"id": 220,
"markerTypeId": 1
},{
"id": 2387,
"markerTypeId": 2
}]
}
}

示例代码
function LoadMarkerTypeList() {
onConfigChanged((ServerConfig, Config) => {
ServerConfig.conf.spot_marker_type_list.map(item => {
spot_marker_type_list[ item.id]= item.markerTypeId
})
for(let key in spot_marker_type_list){
ServerConfig.conf.marker_type_list.map(item=>{
if(spot_marker_type_list[key]==item.markerTypeId){
spot_marker_type_list[key]=item
}
})
}
},false)
}