开发者社区> 问答> 正文

宜搭自定义页面浮动按钮效果用什么组件实现?

Screenshot_2022-12-22-10-43-48-635-edit_com.alibaba.android.rimet.jpg

自定义页面的列表数据较多,页面比较长。上下滑动过程的过程中看不到顶部、底部的按钮。想实现宜搭体验中心左侧底部浮动一个按钮方式,实现不管页面滑动到哪里都可以快捷的点这个浮动按钮进行弹窗、数据新增等操作。 请问这种效果用什么组件实现?是否有实现案例?

展开
收起
成都鹏哥 2022-12-23 11:09:55 823 1
来自:钉钉宜搭
1 条回答
写回答
取消 提交回答
  • 鹏哥冠名:成都B王

    ctrl+c复制下方代码,然后到宜搭可视化设计器里面ctrl+v

    {"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Div","props":{"useFieldIdAsDomId":true,"onClick":{"type":"JSExpression","value":"this.utils.legaoBuiltin.execEventFlow.bind(this, [this.onClick])","events":[{"name":"onClick","id":"onClick","params":{},"type":"actionRef","uuid":"1669692102531_1"}]},"visibility":["PC","MOBILE"],"width":"","customClassName":"","className":"div_lb1lrbdr","behavior":"NORMAL","__style__":":root {\n  justify-content: space-around;\n  align-items: center;\n  position: fixed;\n  bottom: 120px;\n  border-color: #ffffff;\n  box-shadow: rgba(31, 56, 88, 0.2) 4px 4px 15px 0px;\n  right: 10px;\n  opacity: 1.00;\n  padding: 5px;\n  flex-direction: row;\n  display: block;\n  border-radius: 10px;\n  background: #ffffff;\n  width: 60px;\n  height: 70px;\n}\n","fieldId":"div_kzw1m5rk","height":"","events":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"visibility":["PC","MOBILE"],"width":"","customClassName":"","className":"div_lb1lrbdq","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 12px;\n  cursor: pointer;\n  justify-content: flex-end;\n}\n","fieldId":"div_kzw1m5rj","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"visibility":["PC","MOBILE"],"width":"","customClassName":"","className":"div_lb1lrbdo","behavior":"NORMAL","__style__":":root {\n\n}\n","fieldId":"div_kzs1pe9c","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Image","props":{"preview":false,"autoHeight":false,"visibility":["PC","MOBILE"],"src":"/fileHandle?appType=default_tianshu_app&fileName=f3a37de9-5318-4fb7-85c1-990457dba40e.png&instId=&type=download","alt":"Image 404","className":"image_lb1lrbdn","fit":"cover","round":"0","width":"","autoWidth":false,"roundRadius":"0","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  margin-bottom: 0px;\n  filter: grayscale(0%);\n  width: 35px;\n}\n","height":"","fieldId":"image_kzw1m5rh","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]},{"componentName":"Text","props":{"maxLine":0,"visibility":["PC","MOBILE"],"showTitle":false,"contentPaddingMobile":"0","className":"text_lb1lrbdp","behavior":"NORMAL","content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"打印","type":"i18n"},"__style__":":root {\n  line-height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #0099CC;\n  filter: grayscale(0%);\n  font-size: 13px;\n}\n","fieldId":"text_kzw1m5ri","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["item","index"],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]}
    

    image.png

    2022-12-23 13:10:52
    赞同 3 展开评论 打赏
问答分类:
问答地址:
关联地址:
相关产品:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
相关文档: 宜搭
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载