如何使用Titanium为iPhone应用程序创建星级评定控件?

如何解决如何使用Titanium为iPhone应用程序创建星级评定控件?

| 我正在使用Titanium框架构建iPhone应用程序。我需要在我的应用中使用5星级评分控件,就像在应用商店中找到的那样。作为临时解决方案,我正在使用滑块添加评分。我在网上找到的大多数示例都在目标C中。有人可以指导我使用钛实现这一目标。 问候     

解决方法

您只需要创建一个“ 0”并在其中填充所需的按钮数量,然后为它们分配一个点击事件即可。
var rateView = Ti.UI.createView(),max = 5,min = 1; // used in the flexMin and flexMax

function rate(v) {
    // rate code storage goes here
    // your choice on if you want to have separate images of each rating or run a loop
    // based on the value passed in to change a set number of stars to their alternate 
    // image
}

var flexMin = Ti.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE,top: 0,left: 0,height:  rateView.height
});

flexMin.addEventListener(\'click\',function(e) {
    rate(min);
});

var flexMax  = Ti.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    top: 0,right: 0,height:  rateView.height
});

flexMax.addEventListener(\'click\',function(e) {
    rate(max);
});

rateView.add(flexMin);
rateView.add(flexMax); 

var stars = [];
for(var i=1;i<max;i++) {
    stars[i] = Ti.UI.createButton({
        // styling including the darker or light colored stars you choose,\'rating\': i
    });
    stars[i].addEventListener(\'click\',function(e) {
        rate(e.source.i);
    });   
}
使用上面的逻辑方法,您应该可以更改
max
来设置所需的星数,并且只需将
rate(v)
设置为上述注释中的两个选项之一即可。请记住,您需要在视图中添加ѭ5或添加ѭ5或某些类型的位置,该位置会根据可用星数增加。希望这可以帮助。     ,Appcelerator制作了一个自定义ui发布,其中包括星级评分系统。 代码: https://github.com/appcelerator-developer-relations/Forging-Titanium/tree/master/ep-003 视频: http://vimeopro.com/appcelerator/forging-titanium/video/28122504     ,这是示例代码https://github.com/dlinsin/DLStarRating     ,您不能在Titanium构建的应用程序中使用Objective-C代码吗? Titanium用于构建本机应用程序...还是您想知道如何用Javascript编写类似的东西?     ,只需您可以在Android(IOS)上对此进行测试
var stars = [];
var ratingValue;

   var rateView = Ti.UI.createView({
    layout : \'horizontal\',height : \'30%\',width : \'auto\',});

for (var i = 0; i < 5; i++) {
    var starImg = Ti.UI.createImageView({
        image : starOffImgSrc,height : 26,});
    starImg.rating = i + 1;
    starImg.addEventListener(\'click\',function(e) {
        ratingValue = e.source.rating;
        for (var r = 0; r < 5; r++) {
            if (r < e.source.rating) {
                stars[r].image = starOnImgSrc;
            } else {
                stars[r].image = starOffImgSrc;
            }
        }
    });

    stars.push(starImg);
    rateView.add(starImg);
}
    var submitRateBtn = Ti.UI.createButton({
    title : \"Submit Rate\",height : \'auto\',width : \'auto\'
});

    win.add(rateView);
win.add(submitRateBtn);

submitRateBtn.addEventListener(\'click\',function(e) {
    alert(ratingValue);
});
假设您需要5颗星进行评级,并且您的星像高度和宽度= 26 希望对你有帮助     ,也许这将帮助您创建简单的星级
    var StarWinView = Ti.UI.createView({
        width : \"80%\",height : \"35%\",backgroundColor : \"#FFF\",// layout:\"vertical\",borderRadius : 10,borderWidth:2,borderColor : \"#00968A\"

    });

    var StarLabel = Ti.UI.createLabel({
        top : \"10dp\",text : \"Rate the Camp\",color : \"#00968A\",font : {
            fontSize : 18,fontWeight:\"bold\"
        }
    });

    StarWinView.add(StarLabel);

    var StrBtnView = Ti.UI.createButton({

        width : Ti.UI.SIZE,height : Ti.UI.SIZE,layout : \"vertical\",// top:\"20%\",});

    var StarView = Ti.UI.createView({
        width : Ti.UI.SIZE,layout : \"horizontal\"
    });

    var BTN1 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",height : \"30dp\",width : \"30dp\",});
    StarView.add(BTN1);

    var BTN2 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",});
    StarView.add(BTN2);

    var BTN3 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",// backgroundColor:\"#000\",});
    StarView.add(BTN3);

    var BTN4 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",});
    StarView.add(BTN4);

    var BTN5 = Ti.UI.createButton({
        backgroundImage : \"/images/FilledStar.png\",});
    StarView.add(BTN5);

    StrBtnView.add(StarView);

    var ButtonView = Ti.UI.createView({
        top:\"30dp\",width : \"170dp\",height : \"35dp\",backgroundColor : \"transparent\"
    });

    var SubmitBTN = Ti.UI.createButton({
        left : \"0dp\",height : \"100%\",width : \"45%\",backgroundColor : \"00968A\",title : \"Rate\",borderRadius:5,font : {
            fontSize : 12
        },color : \"#FFF\"

    });
    ButtonView.add(SubmitBTN);

    var NotNowBTN = Ti.UI.createButton({
        right : \"0dp\",title : \"Not Now\",color : \"#FFF\"

    });
    ButtonView.add(NotNowBTN);

    StrBtnView.add(ButtonView);

    StarWinView.add(StrBtnView);

    $.StarPopUp.add(StarWinView);

    var rating = 5;
    BTN1.addEventListener(\'click\',function() {

        rating = 1;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/BlankStar.png\";
        BTN3.backgroundImage = \"/images/BlankStar.png\";
        BTN4.backgroundImage = \"/images/BlankStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN2.addEventListener(\'click\',function() {

        rating = 2;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/BlankStar.png\";
        BTN4.backgroundImage = \"/images/BlankStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN3.addEventListener(\'click\',function() {

        rating = 3;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/FilledStar.png\";
        BTN4.backgroundImage = \"/images/BlankStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN4.addEventListener(\'click\',function() {

        rating = 4;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/FilledStar.png\";
        BTN4.backgroundImage = \"/images/FilledStar.png\";
        BTN5.backgroundImage = \"/images/BlankStar.png\";
    });

    BTN5.addEventListener(\'click\',function() {

        rating = 5;
        Ti.API.info(\'rating == \' + rating);

        BTN1.backgroundImage = \"/images/FilledStar.png\";
        BTN2.backgroundImage = \"/images/FilledStar.png\";
        BTN3.backgroundImage = \"/images/FilledStar.png\";
        BTN4.backgroundImage = \"/images/FilledStar.png\";
        BTN5.backgroundImage = \"/images/FilledStar.png\";
    });

    SubmitBTN.addEventListener(\'click\',function() {
        Ti.API.info(\'rating == \' +rating);
        $.StarPopUp.close();

        if (rating == 1) {
            Alloy.Globals.starRating.image = \"/images/1star.png\";
        } else if (rating == 2) {
            Alloy.Globals.starRating.image = \"/images/2star.png\";
        } else if (rating == 3) {
            Alloy.Globals.starRating.image = \"/images/3star.png\";
        } else if (rating == 4) {
            Alloy.Globals.starRating.image = \"/images/4star.png\";
        } else if (rating == 5) {
            Alloy.Globals.starRating.image = \"/images/5star.png\";
        }
    });

    NotNowBTN.addEventListener(\'click\',function() {
        $.StarPopUp.close();
    });
    

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-