滑动列表中按钮点击后居中显示

示例设置:(滑动列表中放了7个按钮作为示例,数量可以随意配置)
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述脚本内容:

using UnityEngine;
using UnityEngine.UI;

public class MTest : MonoBehaviour
{
    public RectTransform rec;
    public ScrollRect scrollRect;
    public int count = 7;
    public Button[] btns = new Button[7];
    public RectTransform btnRec;

    //按钮长度
    float itemWidth;
    //水平组件
    public HorizontalLayoutGroup hlGroup;
    //中间间隔长度
    float middleWidth;
    //左间隔
    float leftWidth;
    //右间隔
    float rightWidth;
    //显示长度
    float showWidth;

    private void Awake()
    {
        itemWidth = btnRec.rect.width;
        middleWidth = hlGroup.spacing;
        leftWidth = hlGroup.padding.left;
        rightWidth = hlGroup.padding.right;
        showWidth = rec.rect.width;

        btns[0].onClick.AddListener(() => OnClickBtn(0));
        btns[1].onClick.AddListener(() => OnClickBtn(1));
        btns[2].onClick.AddListener(() => OnClickBtn(2));
        btns[3].onClick.AddListener(() => OnClickBtn(3));
        btns[4].onClick.AddListener(() => OnClickBtn(4));
        btns[5].onClick.AddListener(() => OnClickBtn(5));
        btns[6].onClick.AddListener(() => OnClickBtn(6));
    }
    
    public void OnClickBtn(int index)
    {
        //总滑动长度
        //所有按钮长度 + 所有中间间隔长度 + 左边距离+ 右边距离 - 显示长度
        float allLength = itemWidth * count + middleWidth * (count - 1) + leftWidth + rightWidth - showWidth;
        //当前按钮总间隔长度
        //(一个按钮长度 + 一个间隔长度) * 当前按钮序号 + 一半按钮长度
        float simpleLength = (itemWidth + middleWidth) * index + itemWidth / 2;
        //所需移动的长度
        //左间隔 + 总间隔长度 - 一半显示距离
        float moveLength = leftWidth + simpleLength - showWidth / 2;
        //转成滑块位置  0~1
        float value = Mathf.Clamp(moveLength / allLength, 0f, 1f);
        scrollRect.horizontalNormalizedPosition = value;
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Bootstrap的Modal组件来创建一个央对齐的弹窗。 首先,在页面引入Bootstrap的CSS和JS文件: ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 然后,创建一个按钮来触发弹窗: ```html <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开弹窗</button> ``` 接下来,在页面创建一个Modal的模板: ```html <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">弹窗标题</h4> </div> <div class="modal-body"> <div style="height: 300px; overflow-y: auto;"> <!-- 这里是弹窗的内容 --> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> ``` 需要注意的是,为了让弹窗的内容可以滚动,我们在弹窗内容的外层包裹了一个高度为300px并且设置了overflow-y属性为auto的div。 最后,我们需要在页面底部添加一个JavaScript代码段,用来初始化Modal组件: ```javascript $(document).ready(function(){ $("#myModal").modal({backdrop: "static", keyboard: false}); }); ``` 这样,我们就创建了一个基于Bootstrap3的央对齐弹窗,并且可以滑动滚动条或滚轮浏览弹窗内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值